.social-media-link {
    --fa-font-family: "Font Awesome 6 Brands";
    border-radius: var(--border-radius);
    display: inline-block;
    height: 45px;
    margin: 0 1rem 0 0;
    padding: unset;
    position: relative;
    text-decoration: none;
    width: 45px
}

.social-media-link:before {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.social-media-link:hover {
    background: var(--color-hover);
    color: #000
}

.social-media-link:hover:visited {
    color: #000
}

.social-media-link:hover:before {
    color: #000
}

.social-media-link:not([class*=toolbar]):focus,
.social-media-link:not([class*=toolbar]):focus-visible {
    background: var(--color-hover);
    -webkit-box-shadow: 0 4px var(--color-charcoal);
    box-shadow: 0 4px var(--color-charcoal)
}

.social-media-link:not([class*=toolbar]):focus:before,
.social-media-link:not([class*=toolbar]):focus-visible:before {
    color: #000
}

.social-media-link:visited {
    color: var(--color-white)
}

.social-media-link:last-of-type {
    margin: 0
}

.social-media-link--x:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2.5rem
}

@media(min-width:992px) {
    .social-media-link--x:before {
        font-size: 1.5rem
    }
}

.social-media-link--instagram:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2.5rem
}

@media(min-width:992px) {
    .social-media-link--instagram:before {
        font-size: 1.5rem
    }
}

.social-media-link--facebook:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 1.5rem;
    left: calc(50% - 1px)
}

@media(min-width:992px) {
    .social-media-link--facebook:before {
        font-size: 1.5rem
    }
}

.social-media-link--youtube:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2rem;
    left: 50%
}

@media(min-width:992px) {
    .social-media-link--youtube:before {
        font-size: 1.5rem
    }
}

.social-media-link--instagram:before,
.social-media-link--youtube:before,
.social-media-link--facebook:before {
    font-weight: 400
}