.social-icons {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
@media only screen and (min-width: 576px) {
  .social-icons {
    align-items: center;
    flex-direction: row;
    gap: 20px;
  }
}

.social-icons__items {
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  gap: 20px;
}

.social-icons__link {
  display: block;
  color: var(--color-yellow);
}
.social-icons__link:hover {
  color: var(--color-yellow-dark);
}
.social-icons__link svg {
  width: 28px;
  height: 28px;
}
@media only screen and (min-width: 992px) {
  .social-icons__link svg {
    width: 20px;
    height: 20px;
  }
}