.heroBanner {
  position: relative;
  padding-top: min(10vw, 100px);
  min-height: 75vh;
  display: flex;

  .backgroundOverlay {
    position: absolute;
    z-index: var(--arrangeMiddle);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

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

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

  .innerWrapper {
    position: relative;
    z-index: var(--arrangeFront);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 50px;

    &.alignLeft { justify-content: flex-start; }
    &.alignRight { justify-content: flex-end; }

    @media (min-width: 1024px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
    }

    @media (min-width: 1280px) {
      gap: 100px;
    }

    .contentWrapper {
      .content {
        >:first-child { margin-top: 0; }
        >:last-child { margin-bottom: 0; }

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

          em {
            font-style: normal;
            color: var(--green);
          }
        }

        p {
          width: 100%;
          max-width: 700px;
        }
      }
    }

    .insetCalloutWrapper {
      position: relative;
      padding: 50px;
      border-radius: var(--roundedCorners);
      border: 2px solid var(--white);
      overflow: hidden;
      width: 100%;
      height: auto;
      transition: var(--transitionExpo);

      @media (min-width: 1024px) {
        width: 300px;
        height: 300px;
        padding: 25px;
      }

      &:hover {
        border-radius: calc(var(--radius) + 10px);

        .image {
          transform: scale(1.1);
        }

        svg {
          .circle { fill: var(--green); }
          .arrow { fill: var(--black); }
        }
      }

      .image {
        position: absolute;
        z-index: var(--arrangeBack);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transitionExpo);
        transform: scale(1);

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

      a {
        text-decoration: none;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .content {
          position: relative;
          z-index: var(--arrangeFront);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0px;

          p {
            font-size: 20px;
            font-weight: 600;
          }

          svg {
            .circle,
            .arrow {
              transition: var(--transitionLinearFast);
            }
          }
        }
      }
    }
  }
}