.alt-hero {
  position: relative;
  display: block;
  overflow: hidden;
}

.alt-hero__viewport { position: relative; overflow: hidden; }

/* Slides stack in one grid cell and cross-fade, so the section never jumps
   height between slides of different crops. */
.alt-hero__track {
  display: grid;
  grid-template-areas: "slide";
}

.alt-hero__slide {
  grid-area: slide;
  position: relative;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  color: var(--alt-slide-text);
}
.alt-hero__slide.is-active { opacity: 1; visibility: visible; }
.alt-hero__track:not(.is-ready) > .alt-hero__slide:first-child { opacity: 1; visibility: visible; }

.alt-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.alt-hero__media picture { display: block; width: 100%; height: 100%; }

.alt-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.alt-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--alt-hero-overlay-color);
  opacity: var(--alt-hero-overlay);
  pointer-events: none;
}

.alt-hero__content-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  aspect-ratio: var(--alt-slide-ratio-d);
  padding-block: 48px;
}

/* A height setting, when the merchant sets one, wins over the image ratio.
   The variable is only emitted when the slider is above 0, so the fallback of
   0px means "let the image aspect ratio decide". */
.alt-hero__content-wrap { min-height: var(--alt-hero-h-d, 0px); }

.alt-hero__content {
  width: 100%;
  max-width: var(--alt-hero-max);
  text-align: var(--alt-slide-align);
}

.alt-hero__slide--top-left .alt-hero__content-wrap    { align-items: flex-start; justify-content: flex-start; }
.alt-hero__slide--top-center .alt-hero__content-wrap  { align-items: flex-start; justify-content: center; }
.alt-hero__slide--top-right .alt-hero__content-wrap   { align-items: flex-start; justify-content: flex-end; }
.alt-hero__slide--middle-left .alt-hero__content-wrap   { align-items: center; justify-content: flex-start; }
.alt-hero__slide--middle-center .alt-hero__content-wrap { align-items: center; justify-content: center; }
.alt-hero__slide--middle-right .alt-hero__content-wrap  { align-items: center; justify-content: flex-end; }
.alt-hero__slide--bottom-left .alt-hero__content-wrap   { align-items: flex-end; justify-content: flex-start; }
.alt-hero__slide--bottom-center .alt-hero__content-wrap { align-items: flex-end; justify-content: center; }
.alt-hero__slide--bottom-right .alt-hero__content-wrap  { align-items: flex-end; justify-content: flex-end; }

.alt-hero__eyebrow { margin-bottom: 14px; color: inherit; }

.alt-hero__title {
  margin: 0 0 20px;
  color: inherit;
  font-family: var(--alt-font-heading);
  font-size: var(--alt-hero-title-d, var(--alt-h1));
  font-weight: var(--alt-fw-heading);
  line-height: var(--alt-lh-h1);
  letter-spacing: var(--alt-heading-tracking);
}
.alt-hero__title p { margin: 0; }

.alt-hero__text { margin-bottom: 24px; color: inherit; font-size: calc(var(--alt-body-size) * 1.05); }

.alt-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: var(--alt-slide-align, flex-start);
}
.alt-hero__slide--top-center .alt-hero__buttons,
.alt-hero__slide--middle-center .alt-hero__buttons,
.alt-hero__slide--bottom-center .alt-hero__buttons { justify-content: center; }

/* ---------------------------------------------------------------- controls */

.alt-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--alt-heading-color);
  cursor: pointer;
  transition: background-color var(--alt-hover-duration) ease;
}
.alt-hero__arrow:hover { background: #fff; }
.alt-hero__arrow--prev { left: 18px; }
.alt-hero__arrow--next { right: 18px; }

.alt-hero__dots {
  position: absolute;
  bottom: 22px;
  z-index: 5;
  display: flex;
  gap: 9px;
}
.alt-hero__dots--left   { left: var(--alt-gutter); }
.alt-hero__dots--right  { right: var(--alt-gutter); }
.alt-hero__dots--center { left: 50%; transform: translateX(-50%); }

.alt-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--alt-hero-dot);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}
.alt-hero__dot.is-active { background: var(--alt-hero-dot); width: 24px; }

/* ---------------------------------------------------------------- bar */

.alt-hero__bar { position: relative; z-index: 4; padding-block: 14px; }

.alt-hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: calc(var(--alt-body-size) * 0.9375);
  color: var(--alt-heading-color);
}
.alt-hero__bar-sep { opacity: 0.4; }
.alt-hero__bar-link {
  color: var(--alt-heading-color);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.alt-hero__bar-link:hover { color: var(--alt-brand); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1279px) {
  .alt-hero__content-wrap { min-height: var(--alt-hero-h-t, var(--alt-hero-h-d, 0px)); }
}

@media (max-width: 767px) {
  .alt-hero__content-wrap {
    aspect-ratio: var(--alt-slide-ratio-m);
    padding-block: 32px;
  }
  .alt-hero__content-wrap { min-height: var(--alt-hero-h-m, var(--alt-hero-h-t, var(--alt-hero-h-d, 0px))); }
  .alt-hero__title { font-size: var(--alt-hero-title-m, var(--alt-h1)); }
  .alt-hero__buttons { gap: 10px; }
  .alt-hero__arrow { width: 36px; height: 36px; }
  .alt-hero__arrow--prev { left: 8px; }
  .alt-hero__arrow--next { right: 8px; }
  .alt-hero__bar-inner { justify-content: center; }
}

/* ---- anchor colour re-assertion (see fix_link_specificity) ---- */
a.alt-hero__bar-link { color: var(--alt-heading-color); }
a.alt-hero__bar-link:hover { color: var(--alt-brand); }