/* Mixins
================================================== */
/* Breakpoints
================================================== */
/*
Icons
---------------------------------------- 

No icon fonts
- always a problem whenever I need to add a new icon or change the icon


No font awesome
- problem with page loading speed


Just use SVGs 
- I can use CSS filter to change color.

*/
.social-media a {
  text-indent: -9999px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.social-media a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.social-media a[href*=facebook] {
  width: 1em;
  height: 1em;
}
.social-media a[href*=facebook]:before {
  background: url(../../images/icons/facebook-f-brands.svg) no-repeat center;
  background-size: contain;
}
.social-media a[href*=instagram] {
  width: 1em;
  height: 1em;
}
.social-media a[href*=instagram]:before {
  background: url(../../images/icons/instagram-brands.svg) no-repeat center;
  background-size: contain;
}
.social-media a[href*="x.com"] {
  width: 1em;
  height: 1em;
}
.social-media a[href*="x.com"]:before {
  background: url(../../images/icons/x-twitter-brands.svg) no-repeat center;
  background-size: contain;
}
.social-media a[href*=linkedin] {
  width: 1em;
  height: 1em;
}
.social-media a[href*=linkedin]:before {
  background: url(../../images/icons/linkedin-in-brands.svg) no-repeat center;
  background-size: contain;
}
.social-media a:hover {
  filter: invert(14%) sepia(19%) saturate(4633%) hue-rotate(92deg) brightness(97%) contrast(107%);
}