/* This is required */
body {
  margin: 0;
}

/* This is the grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  padding: 1vw;
}

.grid > div {
  width: var(--grid-item-size);
  height: var(--grid-item-size);
}

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

/* This are the sizes */
:root {
  --grid-item-size: 98vw; /* 1 col */
}

@media (min-width: 480px) {
  :root {
    --grid-item-size: calc(97vw / 2); /* 2 cols */
  }
}

@media (min-width: 768px) {
  :root {
    --grid-item-size: calc(95vw / 4); /* 4 cols */
  }
}

@media (min-width: 1280px) {
  :root {
    --grid-item-size: calc(94vw / 5); /* 5 cols */
  }
}

@media (min-width: 1920px) {
  :root {
    --grid-item-size: calc(92vw / 7); /* 7 cols */
  }
}