/* Hero project carousel — complements Tailwind utilities on the root element */

.hero-slider-viewport {
  touch-action: pan-y;
}

.hero-slider-track {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  width: calc(100% * var(--hero-slide-count, 4));
  will-change: transform;
}

.hero-slider-slide {
  flex: 0 0 calc(100% / var(--hero-slide-count, 4));
  height: 100%;
  min-height: 0;
}

.hero-slider-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider-track {
    transition: none !important;
  }
}