.subpageHeroBanner {
  position: relative;
  display: flex;
  flex-direction: column;

  &.fitHeightToContent { min-height: 0; }

  &.fitHeightToViewport {
    min-height: 25vh;

    @media (min-width: 768px) { min-height: 45vh; }
    @media (min-width: 1024px) { min-height: 65vh; }
  }

  &.hasTopSlantedAccent {
    .innerWrapper {
      padding-top: 2.5vh;
    }
  }
  &.hasBottomSlantedAccent {
    .innerWrapper {
      padding-bottom: 2.5vh;
    }
  }

  .innerWrapper {
    padding: max(50px, 5vw) 5vw;

    .content {
      position: relative;
      z-index: var(--arrangeFront);
      color: var(--white);
      width: 100%;
      max-width: 800px;

      h1, h2, h3, h4, h5, h6 {
        color: var(--white);
      }

      p {
        font-size: var(--h5min);
      }

      em {
        color: var(--holtLightBlue);
      }

      .calloutWrapper {
        color: var(--holtLightBlue);
      }
    }
  }

  .backgroundImage {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: var(--arrangeBack);

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: top center;
    }
  }
}