.heroBanner {
  position: relative;
  min-height: 25vh;
  display: flex;
  flex-direction: column;

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

  .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);

        em {
          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;
    }
  }
}