.block-steps {
    counter-reset: steps;
    margin-top: 2rem;
}

@media all and (min-width: 64rem) {
    .block-steps {
        margin-top: 10rem;
    }
}

.block-steps .steps {
    padding: 0;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media all and (min-width: 64rem) {
    .block-steps .steps {
        width: 60%;
    }
}

.block-steps .steps::after {
    content: "";
    display: block;
    width: 0px;
    height: 90%;
    position: absolute;
    top: 5%;
    border-right: 3px dotted #CACACA;
    left: 36px;
    z-index: -1;
}

.block-steps .steps li {
    display: flex;
    align-items: center;
    list-style-type: none;
    counter-increment: steps;
    padding: 1rem;
    margin-bottom: .5rem;
}

.block-steps .steps li::before {
    content: counters(steps, ".", decimal-leading-zero);
    font-family: "Fira semi-bold",sans-serif;
    margin-right: .8rem;
    padding: .5rem .7rem;
    background-color: #CACACA;
    border-radius: 50%;
}