body{

}
.grid{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    margin: 50px;
    align-items: center;
    grid-gap: 10px;
}

img{
    object-fit: cover;
}

.grid > article{
    box-shadow: 10px 5px 5px 0px rgb(168, 168, 168) ;
    border-radius: 10px;
    text-align: center;
    background: whitesmoke;
    width: 150px;
}

.grid > article img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}



.konten{
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    width: 150px;
    padding: 15px;
}

@media (max-width:1000px){
    .grid{
        grid-template-columns: repeat(3,1fr);
    }
}
@media (max-width:500px){
    .grid{
        grid-template-columns: repeat(2,1fr);
    }
}