/*------------------
    Action block
------------------*/
.what_we_job
{   
    .grid_row{
        --items_per_line: 2;
    }
    
    .item{
        clip-path: var(--clip_path_corner_top_left);
        display: flex;
        overflow: hidden;
        flex-direction: column;
        padding: var(--block_padding);
        background: var(--bg_light);
        position: relative;

        .data{
            max-width: calc(100% - 200px);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            height: 185px;
        }

        &:last-child{
            background: var(--gradient_dark);
            color: var(--light_color);
        }

        .name{
            font-family: var(--font_family_secondary);
            font-size: var(--font_size_xl);
            font-weight: 500;
            line-height: 130%;
            margin-bottom: 10px;
            margin-top: 15px;
        }

        .desc{
            font-size: var(--font_size_s);
            line-height: 178.571%;
            font-weight: 300;
        }

        a{
            margin-top: auto;

            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--inner_gap_xxs);
            width: fit-content;
            font-size: 11px;
            font-weight: 600;
            transition: .2s linear;
            color: var(--primary_color);
            text-decoration: none;

            .arr
            {
                display: block;

                width: 5px;

                transform: translateY(1px);

                aspect-ratio: 1 / 1.5;
            }

            @media (hover: hover) and (pointer: fine)
            {
                &:hover
                {
                    opacity: 1;
                    color: var(--primary_color);                   
                }
            }
        }

        .bg{
            position: absolute;
            z-index: 1;
            bottom: 0;
            right: 0;
            display: block;
            max-width: 100%;
            height: auto;
            pointer-events: none;
        }
    }   


}



@media print,
(max-width: 1439px)
{
    .what_we_job
    {
        .item{
            .data{
                max-width: calc(100% - 220px);
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .what_we_job
    {
        .item{
            .data{
                height: 230px;
            }
        }
    }
}

@media print,
(max-width: 1200px)
{
    .what_we_job
    {   
        .grid_row {
            --items_per_line: 1;
        }
        
    }
}



@media print,
(max-width: 1023px)
{
    .what_we_job
    {
        
    }
}



@media (max-width: 767px)
{
    .what_we_job
    {
        .item{
            .data{
                height: auto;
                max-width: 100%;

                a{
                    margin-top: 25px;
                }
            }

            .bg{
                display: none;
            }
        }
    }
}