.carousel-strip {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.carousel-item {
  scroll-snap-align: start;
}

.carousel-thumb {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}

.carousel-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform .4s;
}

.carousel-thumb:hover img {
  transform: scale(1.04);
}

/* The big picture above the row: phones only (carousel v3 markup). */
.carousel-stage {
  display: none;
}

@media (max-width: 640px) {
  .carousel-strip {
    gap: 8px;
    grid-auto-columns: calc((100% - 16px) / 3);
  }
  .carousel-thumb {
    border-radius: 8px;
  }

  .carousel-stage {
    display: block;
    position: relative;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--line);
  }
  .carousel-big img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
  }
  /* With the big picture above, the row is a strip of smaller miniatures. */
  .carousel-stage ~ .carousel-strip {
    grid-auto-columns: calc((100% - 24px) / 4);
    padding-bottom: 4px;
  }
}