@layer components {
  .footer {
    border-top: var(--border);
    background-color: var(--color-surface);
    margin-top: var(--block-space-double);
  }

  .footer__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    padding: var(--block-space-double) var(--inline-space-double);
    margin-inline: auto;
    max-inline-size: var(--main-width);
  }

  .footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .footer__logo {
    display: flex;
    align-items: center;
    font-size: var(--text-lg);
    font-weight: 700;
    gap: 0.25em;
    letter-spacing: -0.025em;

    em {
      color: var(--color-primary);
      font-style: normal;
    }
  }

  .footer__tagline {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    border-top: var(--border);
    gap: var(--block-space-half);
    padding-top: var(--block-space);

    @media (width >= 600px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .footer__links {
    display: flex;
    gap: var(--inline-space);
  }

  .footer__link {
    color: var(--color-muted);
    font-size: var(--text-sm);
    transition: color 150ms;

    &:hover {
      color: var(--color-ink);
    }
  }

  .footer__copyright {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }
}