html,
body {
  margin: 0;
}

main {
  --grid-item-min-width: 1fr;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-item-min-width), 1fr)
  );
}

article {
  aspect-ratio: 1;
}

article img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media screen and (min-width: 300px) {
  main {
    --grid-item-min-width: 120px;
  }
}

@media screen and (min-width: 500px) {
  main {
    --grid-item-min-width: 140px;
  }
}

@media screen and (min-width: 768px) {
  main {
    --grid-item-min-width: 200px;
  }
}