.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #677f9b;
    color: #fff;
}

.social-icon img {
    display: block;
    inline-size: 60%;
    block-size: 60%;
    object-fit: contain;
}

.social-icon:hover,
.social-icon:focus {
    opacity: 0.85;
}

.social-icon--facebook {
    background-color: #3b5998;
}

.social-icon--twitter {
    background-color: #000;
}

.social-icon--linkedin {
    background-color: #0083be;
}

.social-icon--pinterest {
    background-color: #c20724;
}

.social-icon--tumblr {
    background-color: #547093;
}

.social-icon--reddit {
    background-color: #ff4500;
}