.standard-hero--outer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  width: 100%;
  position: relative;

  &.primary {
    background-color: rgb(var(--color-primary-dark));

    * {
      color: rgb(var(--color-neutral-white));
    }

    .standard-hero--title {
      color: rgb(var(--color-neutral-white));
    }
  }

  &.light {
    background-color: rgb(var(--color-primary-lighter));

    * {
      color: rgb(var(--color-primary-dark));
    }

    .standard-hero--title {
      color: rgb(var(--color-primary-dark));
    }
  }

  @media (min-width: 992px) {
    align-self: stretch;

    &.primary {
      min-height: 218px;
      height: 218px;
    }

    &.light {
      min-height: 178px;
      height: 178px;
    }
  }

  .standard-hero--inner-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 0;
    width: 100%;
    padding: 32px 0 56px;

    @media (min-width: 992px) {
      padding: 24px 0 56px;
      flex-direction: row;
      width: calc(100% - 40px);
      margin: 0 auto;
    }

    &[data-show-background='true'] {
      min-height: 273px;
      position: relative;
      padding-bottom: 0;

      @media (min-width: 992px) {
        min-height: 218px;
        height: 218px;
        position: static;
        max-width: 1200px;
      }

      .standard-hero--background-wrapper {
        position: relative;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;

        @media (min-width: 992px) {
          height: 218px;
          width: auto;
          left: auto;
          right: 0px;
          top: 0px;
          position: absolute;
        }

        .standard-hero--background-image {
          width: 100%;
          height: 100%;
          object-fit: cover;

          aspect-ratio: 375 / 157;
        }
      }
    }

    .standard-hero--background-wrapper {
      display: none;

      &:after {
        z-index: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgb(var(--color-primary-dark)) 0%,
          rgb(var(--color-primary-dark) / 0%) 100%
        );
      }

      @media (min-width: 992px) {
        &:after {
          z-index: 0;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            rgb(var(--color-primary-dark)) 17.9%,
            rgb(var(--color-primary-dark) / 0%) 50.62%
          );
        }
      }
    }

    .standard-hero--content-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      height: fit-content;
      z-index: 1;
      max-width: 1200px;
      width: calc(100% - 40px);

      margin: 0 auto;

      @media (min-width: 992px) {
        width: max(70%, 1200px);
        height: 100%;
      }

      .standard-hero--title {
        /* Headings/Desktop/H2 */
        font-size: var(--font-h2-size);
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        /* 38.4px */

        @media (min-width: 992px) {
          margin-top: 24px;
        }
      }

      .standard-hero--subtitle {
        color: rgb(var(--color-neutral-grey-100));

        /* Body/**M - Regular */
        font-family: var(--font-body-family);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 22.4px */

        @media (min-width: 992px) {
          
        }
      }
    }
  }
}