@layer components {
  .footer {
    padding: var(--space-md);
    text-align: center;
  }

  .footer__text {
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-primary-7);
  }

  .footer__link {
    color: var(--color-primary-5);
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &:hover,
    &:focus-visible {
      color: var(--color-primary-6);
    }
  }
}