/* SOCIAL ICONS */
.socials-container a,
.phantom-socials a {
  svg {
    path {
      fill: var(--mhpc-text-on-primary);
    }
    path.background {
      fill: var(--mhpc-icon-inverse);
    }
  }
}
.socials-container a:hover,
.phantom-socials a:hover {
  opacity: 1;
  svg {
    path {
      fill: var(--mhpc-icon-inverse);
    }

    path.background {
      fill: var(--mhpc-primary);
    }
  }
}