@layer components {
  .social {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .social__link {
    display: grid;
    place-items: center;
    color: inherit;
    transition:
      transform 150ms ease,
      opacity 150ms ease;

    &:hover {
      transform: translateY(-2px);
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 4px;
    }

    & svg {
      width: 26px;
      height: 26px;
      fill: currentColor;
    }
  }
}