@layer components {
  /* Wide screen: side-by-side layout */
  body > footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space);
  }

  .social-links {
    display: flex;
    gap: var(--inline-space);
    order: 2;
  }

  body > footer > p {
    order: 1;
    margin: 0;
  }

  .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .social-links a:hover {
    opacity: 0.7;
  }

  .social-links .social-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  @media (prefers-color-scheme: dark) {
    .social-links .social-icon {
      filter: invert(1);
    }
  }

  /* Mobile: stacked centered layout */
  @media (max-width: 42rem) {
    body > footer {
      flex-direction: column;
      text-align: center;
    }

    .social-links {
      order: 0;
      margin-block-end: var(--block-space);
    }

    body > footer > p {
      order: 1;
    }
  }
}