@layer footer {
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--primary);
    border-top: var(--border-1) solid rgba(255, 255, 255, 0.1);
  }

  .footer__inner {
    width: 100%;
    max-width: var(--container);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    padding: var(--spacing-2em) var(--spacing-3em);
  }

  @media (max-width: 64em) {
    .footer__inner {
      padding: var(--spacing-2em);
    }
  }

  @media (max-width: 48em) {
    .footer__inner {
      padding: var(--spacing-2em) var(--spacing-1em);
    }
  }

  .footer__text {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .footer__link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition);
  }

  .footer__link:hover {
    opacity: 0.75;
  }

  .footer__link:active {
    opacity: 0.6;
  }

  @media (max-width: 27.5em) {
    .footer__inner {
      flex-direction: column;
      gap: var(--gap-2em);
      text-align: center;
    }
  }
}