@layer component.base {
  .footer {
    display: flex;
    justify-content: center;
  }

  .footer__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem var(--content-padding);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem 8rem;
  }

  .footer__top {
    display: flex;
    row-gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
  }

  .footer__copyright {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .footer__left {
    font-size: 0.875rem;
  }

  .footer__middle,
  .footer__right {
    font-size: 0.75rem;
  }
}