.footer-socials {
  align-items: center;
  gap: 12px;
}

.footer-socials .social-link {
  --social-color: #5cecff;
  --social-rgb: 92, 236, 255;
  position: relative;
  display: grid;
  width: 46px;
  height: 44px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--social-rgb), 0.44);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(var(--social-rgb), 0.1), transparent 52%),
    rgba(7, 13, 25, 0.92);
  color: var(--social-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -10px 22px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(var(--social-rgb), 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.footer-socials .social-link::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 9px;
  pointer-events: none;
}

.footer-socials .social-link svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 23px;
  height: 23px;
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(var(--social-rgb), 0.3));
}

.footer-socials .social-link--vk {
  --social-color: #2787f5;
  --social-rgb: 39, 135, 245;
}

.footer-socials .social-link--telegram {
  --social-color: #2aabee;
  --social-rgb: 42, 171, 238;
}

.footer-socials .social-link--youtube {
  --social-color: #ff1744;
  --social-rgb: 255, 23, 68;
}

.footer-socials .social-link:hover,
.footer-socials .social-link:focus-visible {
  outline: none;
  border-color: rgba(var(--social-rgb), 0.92);
  background:
    linear-gradient(145deg, rgba(var(--social-rgb), 0.38), rgba(var(--social-rgb), 0.1) 58%),
    #07101c;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(var(--social-rgb), 0.32);
  transform: translateY(-2px);
  text-shadow: none;
}

.footer-socials .social-link:active {
  transform: translateY(0) scale(0.96);
}

@media (max-width: 480px) {
  .footer-socials .social-link {
    width: 44px;
    height: 42px;
    border-radius: 12px;
  }

  .footer-socials .social-link svg {
    width: 22px;
    height: 22px;
  }
}