/*-----------
    Steps
-----------*/
.steps
{
    counter-reset: number;


    .swiper
    {
        overflow: visible;

        padding-bottom: var(--block_padding);

        --spaceBetween-0: var(--inner_gap_s);
        --slidesPerView-0: auto;
        --spaceBetween-1024: var(--inner_gap);
        --slidesPerView-1024: 3;
        --spaceBetween-1280: var(--block_padding_s);
        --slidesPerView-1280: 4;


        &:not(.swiper-initialized)
        {
            .swiper-wrapper
            {
                gap: var(--spaceBetween-1280);
            }


            .swiper-slide
            {
                width: calc(100% / var(--slidesPerView-1280) - var(--spaceBetween-1280));
            }
        }
    }


    .item
    {
        position: relative;

        display: flex;
        overflow: hidden;
        flex-direction: column;
        gap: 13px;

        min-height: 510px;
        padding-block: var(--block_padding);
        padding-inline: var(--block_padding_s);

        transition: background .2s linear;

        color: var(--light_color);
        background: rgba(255, 255, 255, .05);


        &.primary
        {
            background: var(--primary_color);

            clip-path: var(--clip_path_corner_top_left);


            &:before,
            .desc
            {
                opacity: 1;
            }
        }


        &:before
        {
            position: absolute;
            right: 0;
            bottom: -85px;

            font-size: 321px;
            font-weight: 900;
            line-height: 115%;

            content: counter(number);
            counter-increment: number;
            transition: opacity .2s linear;
            white-space: nowrap;

            opacity: .05;
        }


        .name
        {
            font-family: var(--font_family_secondary);
            font-size: 20px;
            line-height: 130%;
        }


        .desc
        {
            font-size: 13px;
            line-height: 176.923%;

            transition: opacity .2s linear;

            opacity: .5;
        }
    }
}



@media print,
(max-width: 1279px)
{
    .steps
    {
        .swiper
        {
            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween-768);
                }


                .swiper-slide
                {
                    width: calc(100% / var(--slidesPerView-768) - var(--spaceBetween-768));
                }
            }
        }
    }
}



@media print,
(max-width: 1023px)
{
    .steps
    {
        .swiper
        {
            &:not(.swiper-initialized)
            {
                .swiper-wrapper
                {
                    gap: var(--spaceBetween-0);
                }


                .swiper-slide
                {
                    width: 300px;
                }
            }


            .swiper-slide
            {
                width: 300px;
            }
        }
    }
}