/*-------------------------
    Solution components
-------------------------*/
.solution_components
{
    .grid_row
    {
        --items_per_line: 3;
        --gap_x: var(--block_padding);
        --gap_y: var(--block_padding);


        & > *
        {
            width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x) * 1.25);
        }
    }


    .section
    {
        display: flex;
        flex-direction: column;
        gap: var(--inner_gap);


        &.l_w
        {
            width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x) * 1.75);

            --width_multiplier: 2;
        }


        &.full_w
        {
            --width_multiplier: var(--items_per_line);
        }


        .title
        {
            padding-inline: var(--block_padding);

            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title_s);
            line-height: 124%;
        }

        .desc
        {
            max-width: 100%;
            font-size: var(--font_size_s);
            font-weight: 300;
            line-height: calc(100% + 8px);
        }


        .grid_row
        {
            --width_multiplier: 1;
            --gap_x: var(--block_padding_s);
            --gap_y: var(--block_padding_s);


            &.two
            {
                --items_per_line: 2;
            }


            & > *
            {
                width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x));
            }
        }
    }


    .divider
    {
        position: relative;

        width: 0;

        pointer-events: none;


        &.hor
        {
            width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x));
            height: 0;

            --width_multiplier: var(--items_per_line);


            &:before
            {
                width: 100%;
                height: 1px;
            }
        }


        &:before
        {
            position: absolute;
            top: 0;
            bottom: 0;

            display: block;

            width: 1px;
            height: 100%;

            content: '';

            background: var(--border_color);
        }
    }


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

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

        color: currentColor;
        border: 1px solid #dfdbdb;
        background: var(--bg_light);


        .thumb
        {
            position: relative;

            display: block;
            overflow: hidden;

            background: var(--bg_grey);
            aspect-ratio: 1.75;


            img
            {
                transition: transform .3s linear;
            }
        }


        .info
        {
            display: flex;
            flex-direction: column;
            gap: var(--inner_gap_xs);

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


        .name
        {
            font-size: var(--font_size_l);
            font-weight: 700;
            line-height: 133.333%;
        }


        .desc
        {
            margin-bottom: var(--block_padding_s);

            font-size: 13px;
            line-height: 146.154%;

            opacity: .7;
        }


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

            width: fit-content;
            margin-top: auto;

            font-size: 12px;
            font-weight: 500;
            line-height: 130.769%;

            transition: .2s linear;

            opacity: .3;


            .icon
            {
                display: block;

                width: 5px;

                aspect-ratio: 1 / 1.5;
            }
        }


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


                .link
                {
                    opacity: 1;
                    color: var(--primary_color);
                }
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .solution_components
    {
        .grid_row
        {
            --gap_x: var(--block_padding_s);
            --gap_y: var(--block_padding_s);
        }


        .section
        {
            .title
            {
                padding-inline: var(--inner_gap_l);
            }


            .grid_row
            {
                --gap_x: var(--inner_gap_l);
                --gap_y: var(--inner_gap_l);
            }
        }


        .item
        {
            .info
            {
                padding-block: var(--inner_gap_l);
                padding-inline: var(--inner_gap_l);
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .solution_components
    {
        .grid_row
        {
            --gap_x: var(--inner_gap_l);
            --gap_y: var(--inner_gap_l);
            --items_per_line: 2;


            & > *
            {
                width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x));
            }
        }


        .section
        {
            &.l_w
            {
                width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap));
            }
        }
    }
}



@media (max-width: 767px)
{
    .solution_components
    {
        .grid_row
        {
            --items_per_line: 1;
            --gap_y: var(--block_padding);
        }


        .section
        {
            &.l_w
            {
                --width_multiplier: 1;
            }


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


                &.two
                {
                    --items_per_line: 1;
                }
            }
        }
    }
}