Варианты верстки обычного wrap фрагмента

В макете есть секция, которую, конечно, есть много способов сверстать.

Я сверстал это следующим образом:

SASS:

.skills
    &__title
        margin-bottom: 93px
    &-wrap
        display: flex
        justify-content: space-between
        align-items: center
        flex-wrap: wrap
        margin-bottom: 115px
        &__item
            text-align: center
            flex-basis: 25%
        &__image
            margin-bottom: 24px
    &__button
        display: block
        margin: auto
        padding: 23px 59px

HTML:

<section class="section skills">
    <div class="container">
        <h2 class="section__title skills__title">Что я делаю</h2>
        <div class="skills-wrap">
            <div class="skills-wrap__item">
                <div class="skills-wrap__image"><img src="img/skills/landing.png" alt=""></div>
                <div class="skills-wrap__text"><span>Вёрстка лендинг–страниц
                        и сайтов любой сложности</span> </div>
            </div>
            <div class="skills-wrap__item">
                <div class="skills-wrap__image"><img src="img/skills/responsive.png" alt=""></div>
                <div class="skills-wrap__text"><span>Адаптивная вёрстка под все
                        браузеры и устройства</span> </div>
            </div>
            <div class="skills-wrap__item">
                <div class="skills-wrap__image"><img src="img/skills/programming.png" alt=""></div>
                <div class="skills-wrap__text"><span>Frontend–разработка
                        и программирование</span> </div>
            </div>
            <div class="skills-wrap__item">
                <div class="skills-wrap__image"><img src="img/skills/correction.png" alt=""></div>
                <div class="skills-wrap__text"><span>Исправление и доработка
                        существующей вёрстки</span> </div>
            </div>
        </div>
        <button class="button skills__button">Узнать стоимость</button>
    </div>
</section>

Этот вариант не кажется мне совсем правильным, так как, как минимум я не понимаю, как ограничить свой span в ширине, чтобы текст был именно как по макету.

И того у меня возникают 2 вопроса:

1) Как это лучше сверстать? Есть ли в моем варианте какие-то существенные недочеты? Задумываюсь насчет margin-right каждому блоку, нужно ли его задать каждому item? Если да, то что стоит подкорректировать?

2) Как правильно ограничить span по ширине, чтобы текст был как по макету?