.social-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.social-links__link {
  align-items: center;
  display: flex;
}

.social-links__icon {
  background-color: #494A52;
  border-radius: 50%;
  display: inline-block;
  height: 24px;
  margin: 0 13.5px;
  position: relative;
  width: 24px;
}

{% set social_color = '#494A52' %}
.social-links__icon:hover,
.social-links__icon:focus {
  background-color: ;
}

.social-links__icon:active {
  background-color: ;
}

.social-links__icon svg {
  fill: #FFF;
  height: 24px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

.social-links__icon:hover svg,
.social-links__icon:focus svg,
.social-links__icon:active svg {
  fill: #FFF;
}