/*-------------
    Socials
-------------*/
.socials
{
    .grid_row
    {
        --items_per_line: 7;
        --gap_x: var(--inner_gap_xs);
        --gap_y: var(--inner_gap_xs);
    }


    .link
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--inner_gap_xs);

        height: 120px;
        padding-block: var(--inner_gap) var(--inner_gap_s);
        padding-inline: var(--inner_gap);

        font-size: var(--font_size_xs);
        font-weight: 600;
        line-height: calc(100% + 10px);

        transition: .2s linear;
        text-align: center;
        text-decoration: none;

        color: currentColor;
        background: var(--bg_grey);


        span
        {
            transition: opacity .2s linear;

            opacity: .6;
        }


        .icon
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;

            transition: color .2s linear;

            opacity: 1;
            color: #cdcdcd;


            svg
            {
                display: block;


                .tg_link &
                {
                    width: 18px;
                    height: 15px;
                }


                .vk_link &
                {
                    width: 20px;
                    height: 12px;
                }


                .max_link &
                {
                    width: 18px;
                    height: 18px;
                }


                .youtube_link &
                {
                    width: 20px;
                    height: 14px;
                }


                .rutube_link &
                {
                    width: 20px;
                    height: 17px;
                }


                .dzen_link &
                {
                    width: 17px;
                    height: 17px;
                }


                .vc_link &
                {
                    width: 18px;
                    height: 17px;
                }
            }
        }


        @media (hover: hover) and (pointer: fine)
        {
            &:hover
            {
                color: var(dark_color);


                span
                {
                    opacity: 1;
                }


                .icon
                {
                    color: #a7a7a7;
                }
            }
        }
    }
}



@media print,
(max-width: 1439px)
{
    .socials
    {
        .grid_row
        {
            --gap_x: var(--inner_gap_xxs);
            --gap_y: var(--inner_gap_xxs);
        }
    }
}



@media print,
(max-width: 1023px)
{
    .socials
    {
        .grid_row
        {
            --items_per_line: 5;
        }


        .link
        {
            height: 110px;
        }
    }
}



@media (max-width: 767px)
{
    .socials
    {
        .grid_row
        {
            --items_per_line: 3;
        }


        .link
        {
            height: 80px;
        }
    }
}