.contact-intro {
  margin-top: 16px;
  max-width: 480px;
}

.social-links {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  & a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--accent-on-light) 25%, transparent);
    color: var(--accent-on-light);
    font-size: 14px;
    font-weight: 600;
    transition: background 160ms ease;

    &:hover {
      background: color-mix(in srgb, var(--accent-on-light) 8%, transparent);
    }
  }
}