#steps-block {
    padding: 60px 0 80px;
    background: var(--bgDark);
}

#steps-block .up-block {
    display: grid;
    grid-template-columns: repeat(2, auto);
}

#steps-block .up-block .title {
    width: 70%;
}

#steps-block .up-block .desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    color: var(--text);
}

#steps-block .steps-wrap {
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 30px;
    margin-top: 40px;
}

#steps-block .steps-wrap .step-item .number-step {
    font-weight: 600;
    font-size: 40px;
    line-height: 100%;
    color: var(--secondary);
}

#steps-block .steps-wrap .step-item .name-step {
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    color: var(--head);
    margin: 20px 0 10px;
}

#steps-block .steps-wrap .step-item .desc-step {
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    color: var(--text);
}

@media (max-width: 1100px) {
    #steps-block .up-block {
        grid-template-columns: repeat(1, auto);
        row-gap: 20px;
    }
    #steps-block .up-block .title {
        width: 100%;
    }
}

@media (max-width: 992px) {
    #steps-block {
        padding: 40px 0;
    }
}

@media (max-width: 850px) {
    #steps-block .steps-wrap {
        grid-template-columns: repeat(2, auto);
        gap: 30px;
    }
}

@media (max-width: 530px) {
    #steps-block .steps-wrap {
        grid-template-columns: repeat(1, auto);
    }
}