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);
  }
}