/* --------------------------------- *\

	Footer

\* --------------------------------- */
.social {
  --icon-size: 1.25rem;
  --icon-margin: 1rem;
  --icon-color: var(--color-black);
  --icon-color-hover: var(--color-active);
  display: flex;
  gap: var(--icon-margin);
}
.social__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}
.social__icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--icon-color);
}
.social > a {
  text-decoration: none;
}
.social:empty {
  display: none;
}

@media (pointer: fine) {
  a.social__icon:hover > svg {
    fill: var(--icon-color-hover);
  }
}
.header .social {
  margin-left: 3rem;
}

.footer .social,
.contacts .social {
  --icon-size: 3rem;
  --icon-margin: 1.5rem;
  --icon-color: var(--color-gray);
  --icon-color-hover: var(--color-main);
}
.footer .social__icon,
.contacts .social__icon {
  border: 2px solid var(--color-gray);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .social__icon > svg,
.contacts .social__icon > svg {
  width: 50%;
  height: 50%;
  display: block;
  fill: var(--icon-color);
}

.contacts .social {
  justify-content: center;
}

@media (pointer: fine) {
  .footer a.social__icon:hover {
    border-color: var(--color-main);
  }
}
/* --------------------------------- *\

	Mobile

\* --------------------------------- */
@media (max-width: 767px) and (orientation: portrait), (max-width: 567px) {
  .header .social {
    --icon-size: 2.5rem;
    --icon-margin: 2.5rem;
    display: none;
    margin-left: 0;
    margin-top: var(--margin-large);
    justify-content: center;
    width: 100%;
  }
  .header--open .social {
    display: flex;
  }
}

/*# sourceMappingURL=--8-3-social.css.map */