@layer components {
  .site-footer {
    inline-size: 100%;
    block-size: 41.5cqi;
    padding-block: 14cqi 10cqi;
    padding-inline: 12.25cqi;
    background-color: oklch(31.714% 0 0);
    color: oklch(100% 0 0);
    font-family: var(--font-hero);
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 7.5cqi;
    inline-size: 75.25cqi;
    block-size: 17.5cqi;
  }

  .site-footer__nav {
    display: flex;
    align-items: flex-start;
    inline-size: 75.25cqi;
    block-size: 5.5cqi;
  }

  .site-footer__link {
    color: oklch(100% 0 0);
    font-size: 4cqi;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-footer__link:hover {
    text-decoration: underline;
  }

  .site-footer__copyright {
    inline-size: 75.25cqi;
    color: oklch(100% 0 0);
    font-size: 3.25cqi;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
  }
}