footer.site {
  background: var(--ink); color: #B8C4CF; font-size: 15px;

  .wrap { padding-block: 52px 28px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
  h2 { color: #fff; font-size: 17px; margin-bottom: 12px; }
  a {
    text-decoration: none; display: block; padding: 3px 0;

    &:hover { color: #fff; }
  }
  address { margin-bottom: 20px; }
  .legal {
    grid-column: 1/-1; border-top: 1px solid #2E3B48; padding-top: 20px;
    display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px;

    a { display: inline; padding: 0; }
  }

  @media (max-width: 820px) { .wrap { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .wrap { grid-template-columns: 1fr; } }
}