.social-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.social-links.align-left_true {
    justify-content: left;
}
.social-links__icon {
    background-color: #7b848e;
    border-radius: 50%;
    display: inline-flex;
    height: 36px;
    margin: 0 3px;
    position: relative;
    width: 36px;
    /* Only animate performant properties */
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Optional: improve animation performance */
    will-change: transform, opacity;
}
.social-links__icon svg {
    fill: #fff;
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}
.social-links__icon:active svg,
.social-links__icon:focus svg,
.social-links__icon:hover svg {
    fill: #fff;
}