.hero-banner {
  position: relative;
  padding-top: var(--navbarHeight, 133px);
  background-color: white;
}

.hero-banner__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: max(0px, calc(100vh - var(--navbarHeight, 133px)));
  height: max(0px, calc(100svh - var(--navbarHeight, 133px)));
  height: max(0px, calc(100dvh - var(--navbarHeight, 133px)));
  min-width: 0;
}

.hero-banner__media {
  position: absolute;
  inset: 0;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  margin: 0;
}

.hero-banner__picture,
.hero-banner__image {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner__image {
  object-fit: fill;
  object-position: center;
}

.hero-banner__content {
  grid-area: 1 / 1;
  align-self: start;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
}

.hero-banner__media--desktop {
  display: none;
}

@media (min-width: 768px) {
  .hero-banner__media--desktop {
    display: block;
  }
  .hero-banner__media--mobile {
    display: none;
  }
  .hero-banner__content {
    align-self: center;
  }
  .hero-banner--desktop-cover .hero-banner__image {
    object-fit: cover;
  }
  .hero-banner--desktop-fill .hero-banner__image {
    object-fit: fill;
  }
  .hero-banner--desktop-natural .hero-banner__stage {
    height: auto;
  }
  .hero-banner--desktop-natural .hero-banner__media {
    position: relative;
    inset: auto;
    align-self: start;
    height: auto;
  }
  .hero-banner--desktop-natural .hero-banner__picture,
  .hero-banner--desktop-natural .hero-banner__image {
    height: auto;
  }
}

@media not all and (min-width: 768px) {
  .hero-banner--mobile-cover .hero-banner__image {
    object-fit: cover;
  }
  .hero-banner--mobile-fill .hero-banner__image {
    object-fit: fill;
  }
  .hero-banner--mobile-natural .hero-banner__stage {
    height: auto;
  }
  .hero-banner--mobile-natural .hero-banner__media {
    position: relative;
    inset: auto;
    align-self: start;
    height: auto;
  }
  .hero-banner--mobile-natural .hero-banner__picture,
  .hero-banner--mobile-natural .hero-banner__image {
    height: auto;
  }
}

.hero-header-buttons {
  max-width: 100%;
}

.hero-header-copy > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-header-buttons > .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero-header-buttons > .btn.hero-responsive-button {
  --hero-button-background: var(--hero-button-mobile-background);
  --hero-button-color: var(--hero-button-mobile-color);
  --hero-button-border: var(--hero-button-mobile-border);
  --hero-button-shadow: var(--hero-button-mobile-shadow);
  --hero-button-radius: var(--hero-button-mobile-radius);
  --hero-button-font-size: var(--hero-button-mobile-font-size);
  --hero-button-padding-x: var(--hero-button-mobile-padding-x);
  --hero-button-padding-y: var(--hero-button-mobile-padding-y);
  --hero-button-line-height: var(--hero-button-mobile-line-height);
  --hero-button-width: var(--hero-button-mobile-width);
  --hero-button-arrow: var(--hero-button-mobile-arrow);
  --hero-button-hover-background: var(--hero-button-mobile-hover-background);
  --hero-button-hover-color: var(--hero-button-mobile-hover-color);
  --hero-button-hover-border: var(--hero-button-mobile-hover-border);
  --hero-button-hover-shadow: var(--hero-button-mobile-hover-shadow);
  --hero-button-hover-transform: var(--hero-button-mobile-hover-transform);
  background-color: var(--hero-button-background);
  color: var(--hero-button-color);
  border: var(--hero-button-border);
  box-shadow: var(--hero-button-shadow);
  border-radius: var(--hero-button-radius);
  font-size: var(--hero-button-font-size);
  line-height: var(--hero-button-line-height);
  padding-block: min(var(--hero-button-padding-y), 12vh);
  padding-inline: min(var(--hero-button-padding-x), 12vw);
  min-width: min-content;
  width: var(--hero-button-width);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-header-buttons > .btn.hero-responsive-button:hover {
  background-color: var(--hero-button-hover-background);
  color: var(--hero-button-hover-color);
  border: var(--hero-button-hover-border);
  box-shadow: var(--hero-button-hover-shadow);
  transform: var(--hero-button-hover-transform);
}

.hero-header-buttons > .btn.hero-responsive-button::after {
  display: var(--hero-button-arrow);
  background-color: currentColor;
  flex-shrink: 0;
}

.hero-header-buttons > .btn.hero-responsive-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .hero-header-buttons > .btn.hero-responsive-button {
    --hero-button-background: var(--hero-button-desktop-background);
    --hero-button-color: var(--hero-button-desktop-color);
    --hero-button-border: var(--hero-button-desktop-border);
    --hero-button-shadow: var(--hero-button-desktop-shadow);
    --hero-button-radius: var(--hero-button-desktop-radius);
    --hero-button-font-size: var(--hero-button-desktop-font-size);
    --hero-button-padding-x: var(--hero-button-desktop-padding-x);
    --hero-button-padding-y: var(--hero-button-desktop-padding-y);
    --hero-button-line-height: var(--hero-button-desktop-line-height);
    --hero-button-width: var(--hero-button-desktop-width);
    --hero-button-arrow: var(--hero-button-desktop-arrow);
    --hero-button-hover-background: var(--hero-button-desktop-hover-background);
    --hero-button-hover-color: var(--hero-button-desktop-hover-color);
    --hero-button-hover-border: var(--hero-button-desktop-hover-border);
    --hero-button-hover-shadow: var(--hero-button-desktop-hover-shadow);
    --hero-button-hover-transform: var(--hero-button-desktop-hover-transform);
  }
}

@media (min-width: 768px) {
  .hero-header-copy,
  .hero-header-buttons-slot {
    padding-inline: 3rem;
  }
}

@media (min-width: 1024px) {
  .hero-header-copy,
  .hero-header-buttons-slot {
    padding-inline: 0;
  }
}

@media (min-width: 768px) {
  .hero-header-buttons-slot--desktop-positioned {
    position: absolute;
    z-index: 2;
    inset: 5%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .hero-header-buttons-slot--desktop-positioned > .hero-header-buttons {
    position: absolute;
    left: var(--hero-buttons-desktop-x);
    top: var(--hero-buttons-desktop-y);
    transform: translate(calc(-1 * var(--hero-buttons-desktop-x)), calc(-1 * var(--hero-buttons-desktop-y)));
    width: max-content;
    max-height: 100%;
    padding: 4px;
    overflow: auto;
    justify-content: var(--hero-buttons-desktop-justify);
    pointer-events: auto;
  }
}

/* Exact inverse of the desktop breakpoint, including fractional viewport widths. */
@media not all and (min-width: 768px) {
  .hero-header-buttons-slot--mobile-positioned {
    position: absolute;
    z-index: 2;
    inset: 5%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .hero-header-buttons-slot--mobile-positioned > .hero-header-buttons {
    position: absolute;
    left: var(--hero-buttons-mobile-x);
    top: var(--hero-buttons-mobile-y);
    transform: translate(calc(-1 * var(--hero-buttons-mobile-x)), calc(-1 * var(--hero-buttons-mobile-y)));
    width: max-content;
    max-height: 100%;
    padding: 4px;
    overflow: auto;
    justify-content: var(--hero-buttons-mobile-justify);
    pointer-events: auto;
  }
}