.heroBannerCompact {
  position: relative;
  padding-top: min(10vw, 100px);

  .backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

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

  .innerWrapper {
    align-items: center;

    &.vertical {
      flex-direction: column;

      .left,
      .right {
        width: 100%;
      }
    }

    &.horizontal {
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0px;

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

      .left,
      .right {
        position: relative;
      }
    }

    &.vertical,
    &.horizontal {
      .left,
      .right {
        h1, h2, h3, h4, h5, h6, ol, ul, p {
          color: var(--white);
        }

        .content {
          max-width: 700px;
        }
      }
    }
  }
}