.social-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border: 1px solid var(--line);
}

.social-links > a {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 16px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--line);
  transition: background .2s, transform .2s;
}

.social-links > a:last-child { border-right: 0; }
.social-links > a:hover { background: #fff; transform: translateY(-2px); }
.social-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--acid); }
.social-icon img { width: 20px; height: 20px; }
.social-links small, .social-links b { display: block; }
.social-links small { margin-bottom: 4px; color: var(--muted); font: 500 9px 'DM Mono'; text-transform: uppercase; }
.social-links b { font-size: 12px; }
.social-links i { font-style: normal; }
.footer-social { display: flex; gap: 20px; }
.footer-social a { text-decoration: none; }
.footer-social a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .social-links { grid-template-columns: repeat(2, 1fr); }
  .social-links > a:nth-child(2n) { border-right: 0; }
  .social-links > a { border-right: 0; border-bottom: 1px solid var(--line); }
  .social-links > a:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 600px) {
  .social-links { grid-template-columns: 1fr; }
  .social-links > a { border-bottom: 1px solid var(--line); }
  .social-links > a:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .social-links > a:last-child { border-bottom: 0; }
}