.hero .hero-visual { min-width: 0; min-height: 0; position: relative; }
.hero-gallery-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 38px 17%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  isolation: isolate;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}
.hero-gallery-track::-webkit-scrollbar { display: none; }
.hero-gallery-track:focus-visible { outline: 2px solid #ff9dcc; outline-offset: -3px; border-radius: 24px; }
.hero-gallery-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hero-gallery-track.is-resetting .hero-slide { transition: none; }
.hero-slide {
  position: relative;
  z-index: 0;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  scroll-snap-align: center;
  transform: scale(.76);
  opacity: .35;
  transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease;
  box-shadow: 0 12px 24px #0005;
}
.hero-slide.is-previous { z-index: 1; transform: translateX(43%) scale(.8) rotateY(10deg); opacity: .86; }
.hero-slide.is-next { z-index: 1; transform: translateX(-43%) scale(.8) rotateY(-10deg); opacity: .86; }
.hero-slide.is-active { z-index: 2; transform: scale(1); opacity: 1; box-shadow: 0 22px 38px #0008, 0 0 0 1px #ffffff26; }
.hero-slide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #100c19; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hero-slide .hero-family-photo { background: #fff; }
@media (max-width: 900px) { .hero .hero-visual { width: 100%; max-width: 720px; justify-self: center; } }
@media (max-width: 620px) {
  .hero .hero-visual { width: calc(100% + 34px); max-width: none; }
  .hero-gallery-track { padding-block: 30px; }
  .hero-slide { border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }