/*--------------
    Articles
--------------*/
.articles
{
    .block_head
    {
        &.row
        {
            .title
            {
                width: 497px;
            }
        }
    }


    .grid_row
    {
        --items_per_line: 4;
        --gap_x: var(--inner_gap_s);
        --gap_y: var(--inner_gap_s);


        &.big
        {
            --items_per_line: 3;
        }


        &.small
        {
            --items_per_line: 5;
        }
    }


    .article
    {
        display: flex;
        flex-direction: column;

        text-decoration: none;

        color: var(--secondary_color);
        border: 1px solid var(--border_color);
        border-radius: var(--border_radius);
        background: var(--bg_grey);


        .thumb
        {
            display: block;

            height: 190px;
            margin: -1px;

            border: 1px solid var(--border_color);
            border-radius: var(--border_radius);
            background: var(--secondary_color);
        }


        .info
        {
            display: flex;
            flex: 1 0 auto;
            flex-direction: column;
            gap: var(--block_padding);

            padding-block: var(--inner_gap_l);
            padding-inline: var(--inner_gap);
        }


        .name
        {
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title_xs);
            font-weight: 600;
            line-height: 125%;

            color: #10313d;
        }


        .btn
        {
            width: fit-content;
            margin-top: auto;

            font-family: var(--font_family_tertiary);
            font-size: var(--font_size_l);
            font-weight: 500;
            line-height: 135%;

            border-bottom: 1px solid;
        }
    }
}



@media print,
(max-width: 1279px)
{
    .articles
    {
        .block_head
        {
            &.row
            {
                .title
                {
                    width: 400px;
                }
            }
        }


        .article
        {
            .info
            {
                gap: var(--inner_gap_l);

                padding: var(--inner_gap);
            }


            .btn
            {
                font-size: var(--font_size);
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .articles
    {
        .grid_row.inline
        {
            display: grid;
            overflow: auto;
            gap: var(--inner_gap_s);

            width: calc(100% + var(--cont_padding_double));
            margin-block: 0;
            margin-inline: calc(var(--cont_padding) * -1);
            padding-inline: var(--cont_padding);

            grid-auto-flow: column;
            grid-auto-columns: max-content;
            scroll-padding: 0 var(--cont_padding);
            scroll-snap-type: x mandatory;
            scrollbar-color: transparent transparent;
            scrollbar-width: thin;


            &::-webkit-scrollbar
            {
                display: none;

                width: 0;
                height: 0;

                background-color: transparent;
            }


            &::-webkit-scrollbar-thumb
            {
                background-color: transparent;
            }


            & > *
            {
                width: 286px;
                margin: 0;

                scroll-snap-align: start;
            }
        }
    }
}