@layer genr.component {
    .hero-default {
      width: 100%;
      background-color: var(--color-dark-green);
    }

    .hero-default__content {
      width: 100%;
      max-width: var(--width-md);
    }

    .hero-default__header {
      max-width: var(--width-md);
      margin-bottom: 1.5rem;
      color: var(--color-light-patrol);

      .headline {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
    }

    .hero-default__label {
      color: var(--color-white);
      font-style: italic;
      font-weight: 400;
      font-size: var(--font-size-base);
    }

    .hero-default__subheader {
      margin-bottom: 1.5rem;
      color: var(--color-light-patrol);
    }

    .hero-default__body {
      max-width: var(--width-md);
      font-size: var(--font-size-md);
      line-height: 1.75rem;

      .h3 {
        margin-bottom: 1.5rem
      }
    }

    .hero-default__footer {
      margin-top: 2.5rem;
    }

    .hero-default__media {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: 5rem;
    }

    .hero-default--has-image {
      padding-top: 4rem;
      padding-bottom: 4rem;
      background-color: var(--color-darker-green);

      &:not(:last-child) {
        margin-bottom: -10rem;
        padding-bottom: 0;
      }

      + [class] {
        padding-top: 12rem;
      }

      .hero-default__content {
        margin: auto;
        padding-inline: 1.5rem;

        @media (width > 1280px) {
          padding-inline: 0;
        }
      }

      .hero-default__media {
        max-width: var(--width-xl);
        margin-inline: auto;
      }
    }

    .hero-default--no-image {
      .hero-default__content {
        max-width: var(--width-lg);
        margin: auto;
        padding-block: 2rem;
        padding-inline: 1.5rem;

        @media (width > 1280px) {
          padding-inline: 0;
          padding-bottom: 4rem;
        }
      }
    }
}