.home-gallery-preview {
  --home-gallery-card-width: min(52vw, 65rem);
  --home-gallery-gap: clamp(0.85rem, 1.15vw, 1.4rem);
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-block: clamp(6.25rem, 8vw, 9rem) clamp(6.25rem, 9vw, 10rem);
  color: var(--color-foreground);
}

.home-gallery-preview__viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: default;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.home-gallery-preview__viewport::-webkit-scrollbar {
  display: none;
}

.home-gallery-preview.is-dragging .home-gallery-preview__viewport,
.home-gallery-preview.is-recentring .home-gallery-preview__viewport {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.home-gallery-preview__viewport:focus-visible {
  outline: 1px solid rgb(244 244 240 / 42%);
  outline-offset: -1px;
}

.home-gallery-preview__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  gap: var(--home-gallery-gap);
  padding-inline: calc(50vw - (var(--home-gallery-card-width) / 2));
}

.home-gallery-preview__slide {
  position: relative;
  flex: 0 0 var(--home-gallery-card-width);
  width: var(--home-gallery-card-width);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: var(--kodz-ui-radius);
  background: var(--kodz-glass-surface);
  opacity: 0.42;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: scale(0.84);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  -webkit-backdrop-filter: blur(var(--kodz-glass-blur));
  backdrop-filter: blur(var(--kodz-glass-blur));
  user-select: none;
  -webkit-user-select: none;
}

.home-gallery-preview__slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.home-gallery-preview__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.78);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  transition: filter 520ms ease;
}

.home-gallery-preview__slide.is-active img {
  filter: saturate(1) contrast(1.03) brightness(1);
}

.home-gallery-preview__controls {
  margin-top: clamp(1.6rem, 2.25vw, 2.4rem);
}

.home-gallery-preview__link {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  margin-left: clamp(1.5rem, 3.1vw, 3.9rem);
  font-size: clamp(0.65rem, 0.72vw, 0.82rem);
}

@media (max-width: 991px) {
  .home-gallery-preview {
    --home-gallery-card-width: 68vw;
  }
}

@media (max-width: 767px) {
  .home-gallery-preview {
    --home-gallery-card-width: 82vw;
    --home-gallery-gap: 0.6rem;
    padding-block: 5rem 6.25rem;
  }

  .home-gallery-preview__slide {
    aspect-ratio: 4 / 5;
    transform: scale(0.9);
  }

  .home-gallery-preview__slide.is-active {
    transform: scale(1);
  }

  .home-gallery-preview__link {
    margin-top: 2.5rem;
    margin-left: var(--page-padding);
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .home-gallery-preview {
    --home-gallery-card-width: 64vw;
    padding-block: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-gallery-preview__slide,
  .home-gallery-preview__slide img {
    transition: none;
  }
}