.four-step-story-block {
    margin: 28px 0 36px;
}

.four-step-story-block__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.four-step-story-block__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 14px) / 1);
    min-width: 0;
    padding: 18px 14px;
    background: #f7faf5;
    border: 1px solid #d9e6d3;
    border-radius: 14px;
    color: #2f2f2f;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.four-step-story-block__card:hover {
    background: #edf4e8;
    color: #2f2f2f;
    text-decoration: none;
}

a.four-step-story-block__card:focus-visible {
    outline: 2px solid #397b21;
    outline-offset: 3px;
}

.four-step-story-block__title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.four-step-story-block__description {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.4;
}

@media (min-width: 440px) {
    .four-step-story-block__card {
        flex-basis: calc((100% - 42px) / 2);
        padding: 18px 20px;
    }
}

@media (min-width: 992px) {
    .four-step-story-block__card {
        flex-basis: calc((100% - 42px) / 4);
        padding: 18px 20px;
    }
}