@layer genr.component {
    .hero-startpage {
      overflow: clip;
      background-color: var(--color-dark-green);
    }

    .hero-startpage__content {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: var(--width-xl);
      margin: 0 auto;

      @media (width > 768px) {
        padding-bottom: 6rem;
      }

      .image {
        order: -1;

        @supports (animation-timeline: view()) {
          animation: hero-startpage-image-transition linear forwards;
          transform-origin: 50% 75%;
          animation-timeline: view();
          animation-range: cover 66% cover 100%;
        }
      }
    }

    .hero-startpage__body {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: flex-end;
      width: 100%;
      max-width: var(--width-lg);

      @media (width > 768px) {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        padding-inline: 1.5rem;
      }

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

    .hero-startpage__text {
      font-size: var(--font-size-md);
    }

    .hero-startpage__box {
      display: flex;
      flex-direction: column;
      /* gap: 1.5rem; */
      align-items: flex-start;
      width: 100%;
      padding: 3rem 1.5rem;
      background-color: var(--color-darker-green);
      background-image:
        linear-gradient(to top, var(--color-darker-green), transparent),
        repeating-linear-gradient(
          -45deg,
          var(--color-dark-green),
          var(--color-dark-green) var(--stripe-width),
          var(--color-darker-green) var(--stripe-width),
          var(--color-darker-green) calc(var(--stripe-width) * 2)
        );

      @media (width > 768px) {
        max-width: 38rem;

        @supports (animation-timeline: view()) {
          animation: hero-startpage-box-transition linear forwards;
          animation-timeline: view();
          animation-range: cover 0% cover 100%;
        }
      }

      @media (width > 992px) {
        padding-inline: 3rem;
      }

      .headline {
        display: flex;
        flex-direction: column;
        margin-bottom: 3rem;
      }
    }

    .hero-startpage__title {
      color: var(--color-light-patrol);
    }

    .hero-startpage__link {
      margin-top: 1.5rem
    }

    @keyframes hero-startpage-image-transition {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    @keyframes hero-startpage-box-transition {
      from {
        transform: translateY(30%);
      }

      to {
        transform: translateY(-50%);
      }
    }
}