:root {
  --social-icon-color: white;
  --social-icon-size: 2rem;
  --social-wrapper-gap: 1.5rem;
  --social-item-gap: 1rem;
  --social-icon-hover-color: white;
}

.social-media--wrapper {
  display: flex;
  gap: var(--social-wrapper-gap);
}

.social-media--item {
  display: flex;
  align-items: center;
  color: var(--social-icon-color);
  gap: var(--social-item-gap);
}
.social-media--item:hover .icon,
.social-media--item:hover span {
  color: var(--social-icon-hover-color);
}

.social-media--item .icon,
.social-media--item span {
  color: inherit;
}

.social-media--item .icon {
  width: var(--social-icon-size);
  aspect-ratio: 1;
}