.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;
    border-radius: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-align: center;
    border: 1px solid var(--step-border-color);
}

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

.steps .number {
    color: var(--step-number-color);
    background-color: var(--step-number-background-color);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    justify-self: center;
    align-items: center;
}

.steps .number .digit {
    font-size: 32px;
    font-weight: 500;
    flex: 0 0 80px;
}

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

/* Primary */
.section--primary .steps .item {
    background: var(--step-background-color-on-primary);
    color: var(--step-color-on-primary);
    border: 1px solid var(--step-border-color-on-primary);
}

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

.section--primary .steps .number {
    color: var(--step-number-color);
    background-color: var(--step-number-background-color-on-primary);
}

/* secondary */
.section--secondary .steps .item {
    background: var(--step-background-color-on-secondary);
    color: var(--step-color-on-secondary);
    border: 1px solid var(--step-border-color-on-secondary);
}

.section--secondary .steps .title {
    color: var(--step-title-color-on-secondary);
}

.section--secondary .steps .number {
    color: var(--step-number-color);
    background-color: var(--step-number-background-color-on-secondary);
}

/* tertiary */
.section--tertiary .steps .item {
    background: var(--step-background-color-on-tertiary);
    color: var(--step-color-on-tertiary);
    border: 1px solid var(--step-border-color-on-tertiary);
}

.section--tertiary .steps .title {
    color: var(--step-title-color-on-tertiary);
}

.section--tertiary .steps .number {
    color: var(--step-number-color);
    background-color: var(--step-number-background-color-on-tertiary);
}


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

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

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