/*-------------------
    Solution info
-------------------*/
.solution_info
{
    .data
    {
        position: relative;

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

        padding: var(--block_padding_l);

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

        clip-path: var(--clip_path_double_corners);


        & > *
        {
            position: relative;
            z-index: 3;
        }


        .bg
        {
            position: absolute;
            z-index: 1;
            inset: 0;

            display: block;

            pointer-events: none;


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

                display: block;

                width: 702px;
                max-width: 100%;

                content: '';

                opacity: .6;
                background: linear-gradient(90deg, rgba(24, 24, 24, .85) 66%, rgba(24, 24, 24, .00) 100%);
            }
        }


        .title
        {
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_title);
            font-weight: 600;
            line-height: 115%;
        }


        .desc
        {
            width: 464px;
            max-width: 100%;
        }


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

            margin-top: var(--inner_gap_xxs);


            .label
            {
                font-size: var(--font_size_xxs);
                font-weight: 500;

                text-transform: uppercase;

                opacity: .4;
            }


            .items
            {
                display: flex;
                align-content: stretch;
                align-items: stretch;
                flex-wrap: wrap;
                justify-content: flex-start;
                column-gap: var(--inner_gap_xxs);
                row-gap: var(--inner_gap_xs);

                counter-reset: number;
            }


            .item
            {
                position: relative;

                display: flex;
                align-content: center;
                align-items: center;
                flex-direction: column;
                gap: var(--inner_gap_xs);

                width: 110px;
                max-width: 100%;
                margin-top: var(--inner_gap_xs);
                padding-block: var(--block_padding_l) var(--inner_gap);
                padding-inline: var(--inner_gap_s);

                text-align: center;

                background: rgba(0, 0, 0, .4);


                .thumb
                {
                    position: absolute;
                    top: calc(var(--inner_gap_xs) * -1);
                    left: 0;

                    display: flex;
                    align-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: center;

                    width: 100%;
                    height: 46px;
                    padding-inline: var(--inner_gap_s);


                    img
                    {
                        display: block;

                        max-width: 100%;
                        max-height: 100%;
                    }
                }


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

                    width: 20px;

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

                    text-align: center;

                    background: var(--primary_color);

                    aspect-ratio: 1 / 1;


                    &:before
                    {
                        content: counter(number);
                        counter-increment: number;
                    }
                }


                .name
                {
                    font-size: var(--font_size_xs);
                    font-weight: 600;
                    line-height: 116.667%;
                }
            }
        }


        .btns
        {
            display: flex;
            align-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap);

            margin-top: var(--inner_gap);


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

                min-width: 180px;
                height: 60px;
                padding-inline: var(--block_padding);

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

                text-align: center;
                text-decoration: none;

                color: currentColor;


                &.primary
                {
                    transition: transform .2s linear;

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

                    clip-path: var(--clip_path_double_corners_small);


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


                &.outlined
                {
                    transition: background .2s linear;

                    border: 1px solid rgba(209, 223, 236, .50);


                    @media (hover: hover) and (pointer: fine)
                    {
                        &:hover
                        {
                            background: rgba(255, 255, 255, .15);

                            backdrop-filter: blur(7.1px);
                        }
                    }
                }


                .icon
                {
                    display: block;

                    width: 5px;

                    transform: translateY(1px);

                    aspect-ratio: 1 / 1.5;
                }
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .solution_info
    {
        .data
        {
            padding: var(--block_padding);
        }
    }
}



@media (max-width: 767px)
{
    .solution_info
    {
        .cont
        {
            padding-inline: 0;
        }


        .data
        {
            padding-block: var(--block_padding_l) 248px;
            padding-inline: var(--cont_padding);


            .included
            {
                .items
                {
                    column-gap: var(--inner_gap_xs);
                    row-gap: var(--inner_gap_l);
                }


                .item
                {
                    width: calc(50% - var(--inner_gap_xxs));
                }
            }


            .btns
            {
                gap: var(--inner_gap_s);


                .btn
                {
                    width: 100%;
                }
            }
        }
    }
}