@layer genr.component {
    .footer {
      margin-top: auto;
      background-color: var(--color-darker-green);

      @supports (animation-timeline: view()) {
        animation: footer-transition linear forwards;
        animation-timeline: view();
        animation-range: cover 0% cover 20%;
      }
    }

    .footer__header {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .footer__content {
      display: flex;
      flex-direction: column;
      /* align-items: flex-start; */
      gap: 3rem;
      max-width: var(--width-lg);
      margin: auto;
      padding: 3rem 1.5rem;

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

    .footer__logo {
      display: block;
      width: fit-content;
      padding: 1rem;
      border-radius: 0 1.5em;
      transition: calc(var(--transition-duration) / 2);

      &:hover {
        background-color: var(--color-dark-green);
      }

      &:active {
        transform: scale(0.9);
      }
    }

    .footer__body {
        display: grid;
        gap: 3rem;
        width: 100%;

        @media (width > 768px) {
          gap: 1.5rem;
          grid-template-columns: repeat(2, 1fr);
        }

        @media (width > 1280px) {
          grid-template-columns: repeat(4, 1fr);
        }
    }

    @keyframes footer-transition {
      from {
        background-color: var(--color-dark-green);
      }

      to {
        background-color: var(--color-darker-green);
      }
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .footer-links__header {
        .headline {
            font-weight: 700;
        }
    }

    .footer-links__items {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links__link {
      display: inline-flex;
      padding: 0.5rem 0;
      line-height: 1.5rem;
      text-decoration: none;
      background-color: transparent;
      border: 0;
      cursor: pointer;

      &:active {
        transform: scale(0.9);
      }
    }
}