:root {
    --social-max-width: 20rem;
    --social-min-width: 2rem;
}

@media screen and (max-width: 1275px) {
    .social-width {
        width: var(--social-min-width);
    }

    .social-link span {
        display: none;
    }

    .social h1 {
        display: none;
    }

    .social-archive {
        width: calc(var(--profile-content-width-min) + 6rem);
    }
}

@media screen and (min-width: 1276px) {
.social-width {
        width: var(--social-max-width);
    }

    .social-link span {
        text-decoration: none;
        position: relative;
        color: var(--color-text);
        margin-left: auto;
        font-size: 1.4rem;
        font-weight: 500;
    }

    .social-archive {
        width: calc(var(--social-max-width) + 4rem);
    }
}

.social {
    padding: 3rem;
    padding-right: 2rem;
    padding-left: 2rem;
    border-radius: 1rem;
    box-shadow:
        rgba(79, 50, 93, 0.25) 0px 30px 60px -12px,
        rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    background-image: var(--background-light);
}

.social-link {
    height: 2rem;
    display: flex;
    flex-direction: row;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}

.social-link img {
    height: 2rem;
    width: 2rem;
    transition: var(--transition);
}

.social-link img:hover {
    filter: drop-shadow(0px 4px 8px var(--social-color));
}

.social-link svg {
    transition: var(--transition);
}

.social-link svg:hover {
    filter: drop-shadow(0px 0px 8px var(--social-color));
}

/* Underline links */

.social-link span:hover {
    color: var(--social-color);
}

.social-link span::after {
    content: "";
    position: absolute;
    width: 0;
    background-color: var(--social-color);
    transition: var(--transition);
    height: 3px;
}

.social-link span::after {
    bottom: -3px;
    height: 3px;
    right: 0;
}

.social-link span:hover::after {
    width: 100%;
}