.footer-socials {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    @include breakpoint(md) {
        flex-direction: row;
    }

    &__title {
        color: var(--rocket-color-white-base);
        font-family: var(--rocket-font-secondary);
        font-size: 1.875rem;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        list-style: none;

        @include breakpoint(lg) {
            gap: 18px;
        }
    }
}

.social-link {
    @include transition;
    @include size(60px);

    align-items: center;
    border: 2px solid var(--rocket-color-white-base);
    border-radius: 50%;
    color: var(--rocket-color-white-base);
    display: flex;
    justify-content: center;
    padding: 5px;
    text-decoration: none;

    @include breakpoint(lg) {
        @include size(80px);
    }

    @include event {
        background-color: var(--rocket-color-white-base);
        color: var(--rocket-color-secondary-100);
    }

    svg {
        @include size(26px, auto);

        display: block;
        color: inherit;
        fill: currentColor;

        @include breakpoint(lg) {
            @include size(40px, auto);
        }
    }
}