#carousel {
  display: grid;

  grid-template-columns: repeat(
    var(--carousel-grid-template-columns),
    var(--image-size)
  );
  grid-auto-flow: row;
  grid-auto-rows: var(--image-size);

  gap: 0.8rem;

  align-content: center;
  justify-content: center;
}

#carousel img {
  border-radius: 0.3rem;

  filter: var(--filter-shadow);
  -webkit-filter: var(--filter-shadow);
}

#carousel img {
  align-self: center;
  justify-self: center;

  transition: transform 150ms;
  cursor: pointer;
}

img.hero {
  width: var(--hero-image-size);
  height: var(--hero-image-size);

  grid-column: span 3;
  grid-row: span 3;
}

img.hero:hover {
  transform: scale(0.98);
}

img.preview {
  width: var(--image-size);
  height: var(--image-size);

  grid-column: span 1;
  grid-row: span 1;

  animation: grid-reflow 300ms;
  animation-direction: reverse;
}

img.preview:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 90rem) {
  html {
    --carousel-grid-template-columns: 7;
  }
}

@media screen and (max-width: 70rem) {
  html {
    --carousel-grid-template-columns: 5;
  }
}

@media screen and (max-width: 60rem) {
  html {
    --carousel-grid-template-columns: 4;
  }
}

@media screen and (max-width: 50rem) {
  html {
    --image-size: 140px;
    --carousel-grid-template-columns: 4;
  }
}

@media screen and (max-width: 35rem) {
  html {
    --image-size: 110px;
    --carousel-grid-template-columns: 3;
  }
}