.nav-social-item {
  display: flex;
  flex-direction: row;
  gap: 7px;
  justify-content: center;
  width: fit-content;
  padding-top: 14px;
  opacity: 1;
  transition: all 100ms linear; }
  .nav-social-item svg {
    width: 16px;
    height: 16px;
    fill: var(--svg-ico-fill); }
  .nav-social-item a {
    display: none; }
  .nav-social-item:hover {
    opacity: 1; }
    .nav-social-item:hover svg {
      fill: var(--text-color); }
    .nav-social-item:hover a {
      color: var(--text-color);
      text-decoration: none; }

/*Desktop*/
@media only screen and (min-width: 960px) {
  .nav-social-item a {
    display: inline-block; } }