.steps {
    position: relative;
    color: var(--step-color);
    text-align: center;
}

.steps-inner {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.steps .item {
    position: relative;
    background: var(--step-background-color);
    padding: 40px 30px;
    border-radius: 24px;
}

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

.step-image + .step-title {
    margin-top: 20px;
}

.step-title + .step-text {
    margin-top: 20px;
}

.steps .image {
    height: 60px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    vertical-align: bottom;
}

.steps .image img {
    max-height: 100%;
    width: auto;
    display: inline;
}

 /* column with pad */
.section--primary.on-left.add-text-pad .section__col--last .steps,
.section--primary.on-right.add-text-pad .section__col--first .steps {
    color: var(--step-color-on-primary-section-column);
}

.section--primary.on-left.add-text-pad .section__col--last .steps .item,
.section--primary.on-right.add-text-pad .section__col--first .steps .item {
    background: var(--step-background-color-on-primary-section-column);
}

.section--primary.on-left.add-text-pad .section__col--last .steps .title,
.section--primary.on-right.add-text-pad .section__col--first .steps .title {
    color: var(--step-title-color-on-primary-section-column);
}

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

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

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

@media only screen and (min-width: 991px) {
    .wp-block-column .steps-inner .item {
        width: calc(1/2*100% - (1 - 1/2)*30px);
    }


    .steps-inner .item:nth-child(odd) {
        margin-top: 80px;
    }

    .wp-block-column .steps-inner .item:nth-child(odd) {
        margin-top: 40px;
    } 
}

@media only screen and (min-width: 768px) {

    .steps-inner {
        gap: 30px;
    }

    .wp-block-column .steps-inner {
        flex-wrap: wrap;
    }

    .steps-inner .item {
        width: calc(1/2*100% - (1 - 1/2)*30px);
    }

    .wp-block-column .steps-inner .item {
        width: 100%;
    }


    .steps-inner .item:nth-child(odd) {
        margin-top: 40px;
    }

    .wp-block-column .steps-inner .item:nth-child(odd) {
        margin-top: 20px;
    } 
}

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

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

    .steps .item {
        width: 100%;
    }
}