@layer layout {
  .footer {
    background: linear-gradient(to right, oklch(from var(--color-secondary) calc(l + 0.1) c h), oklch(from var(--color-secondary) calc(l + 0.15) c h));
    color: var(--color-white);

    p {
      opacity: 0.75;
    }
    
    .container {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 3rem;
      padding-block: 6rem;

      @media (width < 65rem) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (width < 45rem) {
        padding-block: 3rem;
      }

      @media (width < 35rem) {
        grid-template-columns: 1fr;
      }
    }

    .copyright {
      padding-block: 1.5rem;
      margin: unset;

      text-align: center;
      font-size: var(--font-size-sm);

      border-block-start: 1px solid oklch(from var(--color-secondary) calc(l + 0.25) c h);
    }

    .logo {
      margin-block-end: 1.5rem;
    }

    :is(h2, h3) {
      margin-block-end: 1.5rem;

      color: var(--color-white);

      text-transform: uppercase;
      font-weight: 500;
      font-size: var(--font-size-lg);
    }

    .navigation {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      a {
        text-decoration: none;

        opacity: 0.75;
        transition: opacity .1s linear;

        &:hover, &:focus-visible, &[aria-current="page"] {
          opacity: 1;
        }
      }
    }
    
    .social {
      display: flex;
      gap: 1rem;
      margin-block-start: 1.5rem;

      a {
        color: var(--color-white);

        border: unset;

        opacity: 0.75;
        transition: opacity .1s linear;

        &:hover, &:focus-visible {
          opacity: 1;
        }
      }
    }
  }
}