.hero--high-impact {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-top: 0 !important;
  position: relative;

  @media screen and (max-width: 992px) {
    padding: 0;
  }
  .hero--high-impact__carousel-cell {
    width: 100%;
    position: relative;

    .hero--high-impact__carousel-content {
      display: grid;
      gap: var(--section-gutter);
      grid-template-columns: 1fr 1fr;
      padding-top: calc(var(--header-height) + var(--spacer-lg));
      padding-bottom: var(--section-gutter);

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--color-neutral) var(--data-background) 100% 50% / cover
          no-repeat;
        z-index: -1;
      }
      @media screen and (max-width: 992px) {
        grid-template-columns: 1fr;
      }

      .hero--high-impact__carousel-text {
        display: flex;
        gap: 2rem;
        flex-direction: column;
        justify-content: space-between;
        text-wrap: balance;

        @media screen and (max-width: 992px) {
          padding: 0 0 5rem;
        }

        .hero--high-impact__carousel-body {
          display: flex;
          flex-direction: column;
          gap: var(--spacer);
        }

        .hero--high-impact__carousel-buttons {
          display: flex;
          align-items: center;
          gap: var(--spacer-sm);

          @media screen and (max-width: 992px) {
            .button {
              width: 100%;
            }
          }
        }
      }

      .hero--high-impact__carousel-media {
        display: flex;
        flex-direction: column;
        justify-content: center;
        aspect-ratio: var(--aspect-media);
        mix-blend-mode: multiply;

        @media screen and (max-width: 992px) {
          order: -1;
        }
        img,
        video {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .swiper-controls {
    padding: 0;
    left: unset;
    right: var(--section-gutter);
    bottom: var(--section-gutter);
    @media screen and (max-width: 992px) {
      padding: var(--spacer);
      width: 100%;
      right: 0;
    }
  }
}