.steps {
    display: flex;
    column-gap: 40px;
}

.steps .single-step {
    position: relative;
}

.steps.steps-3 .single-step {
    width: calc(1/3*100% - (1 - 1/3)*40px);
}
.steps.steps-4 .single-step {
    width: calc(1/4*100% - (1 - 1/4)*40px);
}

.steps .step-number {
    font-weight: 700;
    color: #D6D6D6;
    font-size: 40px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0px;
}

.section--blue .steps .step-number {
    color: #fff;
}

.section--green .steps .step-number {
    color: #7ECC94;
}

.section--purple  .step-text {
    color: #fff;
}

.steps h4 {
    font-size: 16px;
    line-height: 1.375;
    margin-bottom: 15px;
}


@media (min-width: 991px) {
    .steps h4 {
        min-height: 45px;
        padding-left: 45px;
    }    

    .steps .single-step.pointer-next-step:after {
        display: block;
        content: '';
        width: 60px;
        height: 11px;
        background: url('../../images/blocks/steps/arrow.png') center center no-repeat;
        background-size: 100%;
        position: absolute;
    }

    .section--blue .steps .single-step.pointer-next-step:after,
    .section--purple .steps .single-step.pointer-next-step:after {
        background-image: url('../../images/blocks/steps/arrow-white.png');
    }


    .steps .single-step.pointer-next-step:nth-child(1):after,
    .steps .single-step.pointer-next-step:nth-child(3):after {
        right: -30px;
        bottom: -15px;
    }

    .steps .single-step.pointer-next-step:nth-child(2):after {
        right: -34px;
        top: -14px;
        transform: rotateX(180deg);
    }

    .steps.steps-3 .single-step.pointer-next-step:nth-child(3):after,
    .steps.steps-4 .single-step.pointer-next-step:nth-child(4):after {
        content: none;
    }
}

@media (max-width: 991px) {
    .steps {
        flex-wrap: wrap;
    }

    .steps.steps-4 .single-step,
    .steps.steps-3 .single-step {
        min-width: 100%;
        width: 100%;
    }

    .steps .single-step {
        padding-left: 40px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .steps .single-step:last-child {
        margin: 0;
    }
    
    .steps .step-text {
        position: relative;
    }

    .steps .step-text:before {
        content: '';
        background: url(../../images/blocks/steps/dashed-line.png) repeat-y 0 0;
        width: 2px;
        height: 100%;
        position: absolute;
        left: -30px;
        top: 7px;
    }

    .section--green .steps .step-text:before {
        background-image: url(../../images/blocks/steps/dashed-line-dark.png);
    }

    .steps .single-text:last-of-type:before {
        display: none;
    }
   
    .steps .step-number {
        font-size: 30px;
    }

    .steps .single-step p {
        position: relative;
    }

    .steps .single-step:after {
        display: none
    }
}

@media (max-width: 767px) {}