/*
 * Hero slider styles.
 *
 * Layout only: the band ratio comes from Tailwind classes on the block wrapper in template.php,
 * and the slider behaviour from Swiper's own stylesheet plus assets/view.js.
 */

.tw-hero-slider__swiper {
  height: 100%;
  width: 100%;
}

.tw-hero-slider__swiper .swiper-slide {
  margin: 0;
  overflow: hidden;
}

.tw-hero-slider__link {
  display: block;
  height: 100%;
  width: 100%;
}

.tw-hero-slider__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Swiper's default bullet colour is close to invisible on photos. */
.tw-hero-slider__swiper .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.6;
}

.tw-hero-slider__swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* The fade effect animates the slides, not the wrapper, so both need the override. */
  .tw-hero-slider__swiper .swiper-wrapper,
  .tw-hero-slider__swiper .swiper-slide {
    transition-duration: 0ms !important;
  }
}