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

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