/* v0.1.17 — dependency-free hero slider; proportional crop, never image distortion. */
.Banner.BannerSlider {
  position: relative;
  width: 100%;
  height: clamp(240px, 29.74vw, 571px);
  overflow: hidden;
}

/* Legacy mirrored Flickity DOM remains readable before site.js normalizes it. */
.BannerSlider > .flickity-viewport,
.BannerSlider > .flickity-viewport > .flickity-slider {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}

.BannerSlider-cell {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
}

/* Once site.js has normalized the old captured Flickity DOM, slides are layered. */
.BannerSlider.mra-hero-slider > .BannerSlider-cell {
  position: absolute !important;
  inset: 0;
  left: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.BannerSlider.mra-hero-slider > .BannerSlider-cell.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.BannerSlider-cell > img.Thumbnail,
.BannerSlider-cell > picture > img,
.BannerSlider-cell img.Thumbnail {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
}

.mra-hero-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.mra-hero-dots {
  position: relative;
  z-index: 3;
}

.mra-hero-dot-button {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mra-hero-playpause {
  appearance: none;
  border: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .BannerSlider.mra-hero-slider > .BannerSlider-cell {
    transition: none;
  }
}

@media (max-width: 700px) {
  .Banner.BannerSlider {
    height: clamp(220px, 56vw, 340px);
  }
}