@layer components {
  .footer-inner {
    padding-block: var(--space-4);
    padding-inline: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    background: var(--color-surface);
    backdrop-filter: blur(4px);

    @media (min-width: 48rem) {
      padding-inline: var(--space-8);
    }
  }

  .footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    @media (min-width: 48rem) {
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
    }
  }

  .footer-separator {
    display: none;

    @media (min-width: 48rem) {
      display: inline;
    }
  }

  .badge-link {
    display: none;
    text-decoration: none;
    color: inherit;

    @media (min-width: 48rem) {
      display: inline;
    }
  }
}