.social-links {
    --border-width: 1px;
    --gap: 8.5333333333vw;
    --order: 0
}

@media(min-width: 720px) {
    .social-links {
        --border-width:0;
        --gap: 2.5vw;
        --order: 1
    }
}

@media(min-width: 1281px) {
    .social-links {
        --border-width:0;
        --gap: 1.6666666667vw;
        --order: 3
    }
}

@media(min-width: 2400px) {
    .social-links {
        --border-width:0;
        --gap: 40px;
        --order: 3
    }
}

.social-links {
    display: flex;
    align-items: flex-start;
    gap: var(--gap)
}

.social-links__item:hover {
    animation: icon-bounce 1s ease
}

.social-links__icon {
    --height: 6.4vw
}

@media(min-width: 720px) {
    .social-links__icon {
        --height:2.8125vw
    }
}

@media(min-width: 1281px) {
    .social-links__icon {
        --height:1.875vw
    }
}

@media(min-width: 2400px) {
    .social-links__icon {
        --height:45px
    }
}

.social-links__icon {
    height: var(--height)
}

@keyframes icon-bounce {
    0% {
        transform: translateY(0)
    }

    17% {
        transform: translateY(-15%)
    }

    34% {
        transform: translateY(0)
    }

    51% {
        transform: translateY(-7%)
    }

    68% {
        transform: translateY(0)
    }

    85% {
        transform: translateY(-3%)
    }

    to {
        transform: translateY(0)
    }
}