@import "../styles/pager-dots.css";

.ec-hero-slideshow {
  position: relative;
  overflow: hidden;
}

.ec-hero-slideshow__viewport {
  position: relative;
  min-height: var(--ec-hero-slideshow-height, auto);
}

.ec-hero-slideshow__sizer {
  display: grid;
  min-height: var(--ec-hero-slideshow-height, auto);
}

.ec-hero-slideshow__sizerItem {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
  min-height: var(--ec-hero-slideshow-height, auto);
}

.ec-hero-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 900ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  pointer-events: none;
  min-height: var(--ec-hero-slideshow-height, auto);
}

.ec-hero-slideshow__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ec-hero-slideshow__sizerItem > .ec-hero,
.ec-hero-slideshow__slide > .ec-hero {
  min-height: var(--ec-hero-slideshow-height, auto);
}