.steps {
    position: relative;
}

.steps-inner {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.steps .item {
    position: relative;
    background: var(--step-background-color);
    color: var(--step-color);
    padding: 20px;
}

.steps .title {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.16;
    margin-bottom: 20px;
    position: relative;
    color: var(--step-title-color);
}

.steps .number {
    color: var(--step-title-color);
    margin-bottom: 15px;
}

.steps .number .digit {
    position: relative;
    padding-bottom: 5px;
    font-size: 22px;
    font-weight: 500;
}

.steps .number .digit:after {
    content: '';
    display: block;
    width: 140%;
    height: 2px;
    background: var(--step-title-color);
    position: absolute;
    bottom: 0;
    left: 0;
}

.steps .text {
    font-size: 16px;
    margin: 0;
}

/* Primary */

.section--primary .steps .item,
.section--primary-content-width .steps .item  {
    background: var(--step-background-color-on-primary);
    color: var(--step-color-on-primary);
}

.section--primary .steps .title,
.section--primary .steps .number,
.section--primary-content-width .steps .title,
.section--primary-content-width .steps .number {
    color: var(--step-title-color-on-primary);
}

.section--primary .steps .number .digit:after,
.section--primary-content-width .steps .number .digit:after  {
    color: var(--step-title-color-on-primary);
}

/* secondary */

.section--half-background-image .steps .item  {
    background: var(--step-background-color-on-half-background-image);
    color: var(--step-color-on-half-background-image);
}

.section--half-background-image .steps .title,
.section--half-background-image .steps .number {
    color: var(--step-title-color-on-half-background-image);
}

.section--half-background-image .steps .number .digit:after  {
    color: var(--step-title-color-on-half-background-image);
}

@media only screen and (min-width: 1199px) {
    .steps-inner {
        gap: 40px;
    }
}

@media only screen and (max-width: 1199px) {
    .steps-inner {
        gap: 30px;
    }

    .section--half-background-image .steps-inner {
        flex-wrap: wrap;
    }
}


@media only screen and (max-width: 767px) {
    .steps-inner {
        justify-content: center;
        flex-wrap: wrap;
    }

}