/* Created by Content Blocks */

.hero-image-advanced__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.hero-image-advanced__overlay--left {
  justify-content: flex-start;
}

.hero-image-advanced__overlay--center {
  justify-content: center;
}

.hero-image-advanced__overlay--right {
  justify-content: flex-end;
}

.hero-image-advanced__overlay-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
}

.hero-image-advanced__overlay-inner--full {
  width: 100%;
}

.hero-image-advanced__backdrop {
  position: absolute;
  inset: 0;
}

.hero-image-advanced__backdrop--color {
  background-color: var(--backdrop-color, #000000);
  opacity: calc(var(--backdrop-opacity, 20) / 100);
}

.hero-image-advanced__backdrop--blur {
  -webkit-backdrop-filter: var(--backdrop-blur, none);
  backdrop-filter: var(--backdrop-blur, none);
}

.hero-image-advanced__content {
  position: relative;
  z-index: 1;
}

.hero-image-advanced__headline {
  max-width: 100%;
}

.hero-image-advanced__headline--full {
  max-width: 100%;
}

.hero-image-advanced__headline--half {
  max-width: 50%;
}

.hero-image-advanced__headline--third {
  max-width: 33.333%;
}

.hero-image-advanced:not(.hero-image-advanced--has-content) {
  min-height: 20rem;
}

@media (min-width: 640px) {
  .hero-image-advanced:not(.hero-image-advanced--has-content) {
    min-height: 24rem;
  }
}

@media (max-width: 1279px) {
  /* Reason: keeps the wrapper from collapsing when overlay markup exists but has no visible content */
  .hero-image-advanced {
    min-height: 20rem;
  }

  .hero-image-advanced__headline--half,
  .hero-image-advanced__headline--third {
    /* Reason: avoid excessive line wrapping on small screens which can clip overlay content */
    max-width: 100%;
  }

  .hero-image-advanced--has-content .hero-image-advanced__media {
    position: relative;
    width: 100%;
    height: auto;
  }

  .hero-image-advanced--has-content .hero-image-advanced__overlay {
    /* Reason: keep content overlayed on top of the image in tablet/mobile view, docked to the bottom */
    position: absolute;
    inset: 0;
    height: 100%;
    align-items: flex-end;
  }

  .hero-image-advanced--has-content .hero-image-advanced__overlay-inner {
    /* Reason: stretch backdrop across image while keeping image height driven by media aspect ratio */
    height: 100%;
    min-height: 100%;
    width: 100%;
    align-items: flex-end;
  }

  .hero-image-advanced--has-content .hero-image-advanced__content {
    /* Reason: reduce vertical padding so long content fits within overlay area on smaller screens */
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}