/*----------------------
    Useful materials
----------------------*/
.useful_materials
{
    .cont
    {
        display: flex;
        align-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    .data
    {
        display: flex;
        flex-direction: column;
        gap: var(--block_padding);

        width: 565px;
        max-width: 100%;
        padding-block: var(--outside_gap_s) 100px;
        padding-inline: var(--block_padding) 45px;

        border-right: 1px solid #d2d2d2;


        .block_head
        {
            margin-bottom: 0;
            padding-inline: 0;
        }


        .all_link
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--inner_gap_xxs);

            width: fit-content;
            min-width: 180px;
            max-width: 100%;
            height: 60px;
            padding-inline: var(--block_padding_s);

            font-size: var(--font_size_xs);
            font-weight: 600;

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

            color: var(--light_color);
            background: var(--gradient_primary);

            clip-path: var(--clip_path_double_corners_small);


            .icon
            {
                display: block;

                width: 5px;

                transform: translateY(1px);

                aspect-ratio: 1 / 1.5;
            }


            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    transform: scale(1.1);
                }
            }
        }


        .divider
        {
            width: calc(100% + 160px);
            height: 1px;
            margin-inline: -115px -45px;

            background: #d2d2d2;
        }


        .socials
        {
            .title
            {
                margin-bottom: var(--inner_gap);

                font-family: var(--font_family_secondary);
                font-size: var(--font_size_l);
                line-height: 144.444%;

                opacity: .6;
                color: #242424;
            }


            .grid_row
            {
                --items_per_line: 5;
                --gap_x: var(--inner_gap_xxs);
                --gap_y: var(--inner_gap_xxs);
            }


            .link
            {
                height: 80px;
                padding-block: var(--inner_gap) var(--inner_gap_s);
                padding-inline: var(--inner_gap_xs);
            }
        }
    }


    .articles
    {
        width: calc(100% - 565px);
        padding-block: var(--outside_gap_s) 100px;
        padding-inline: 94px var(--outside_gap_xxs);
    }
}



@media print,
(max-width: 1279px)
{
    .useful_materials
    {
        .data
        {
            width: 480px;
            padding-block: var(--outside_gap_s) var(--outside_gap_s);
            padding-inline: 0 var(--block_padding);


            .divider
            {
                width: calc(100% + var(--block_padding));
                margin-inline: 0 calc(var(--block_padding) * -1);
            }
        }


        .articles
        {
            width: calc(100% - 480px);
            padding-block: var(--outside_gap_s);
            padding-inline: var(--block_padding) 0;
        }
    }
}



@media print,
(max-width: 1023px)
{
    .useful_materials
    {
        .data
        {
            order: 2;

            width: 100%;
            padding-inline: 0;
            padding-top: 0;

            border: none;


            .block_head,
            .all_link
            {
                display: none;
            }


            .divider
            {
                width: 100%;
                margin-inline: 0;
            }
        }


        .articles
        {
            width: 100%;
            padding-block: var(--outside_gap_s) var(--block_padding_l);
            padding-inline: 0;
        }
    }
}



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