Выравнивание содержимого флекс-контейнера

Есть блок с тремя колонками. Колонка состоит из 3-х блоков: пустой(для прижатия картинки к заголовку), картинки, заголовка. Картинки разные по размеру. Средняя колонка шире соседних. Третья картинка выше остальных. Нужно чтобы картинки и заголовки были выровнены по одной линии - как на картинке, чтобы это работало для картинок разных размеров. https://codepen.io/pow44feet/pen/yLJpwqM

<section class="why">
      <div class="container">
         <div class="why__top">
            <div class="why__top-header header-medium">
               Почему круто быть с нами:
            </div>
         </div>
         <div class="why__body slider-normal">
            <div class="why__column">
               <div class="why__item">
                  <div class="why__empty"></div>
                  <div class="why__image">
                     <img src="https://github.com/pow44feet/images/blob/main/01.png?raw=true" alt="В руке мобильный телефон с открытым приложением Tasty Cookery">
                  </div>
                  <h4 class="why__header">Получать лучшие рецепты
                                          по разным категориям</h4>
               </div>
            </div>
            <div class="why__column why__column--big">
               <div class="why__item">
                  <div class="why__empty"></div>
                  <div class="why__image">
                     <img src="https://github.com/pow44feet/images/blob/main/02.png?raw=true" alt="Шеф-повар капает соусом с ложки в тарелку с салатом">
                  </div>
                  <h4 class="why__header">Готовить без лишних усилий
                                              и делать из каждого дня
                                               не рутинный</h4>
               </div>
            </div>
            <div class="why__column">
               <div class="why__item">
                  <div class="why__empty"></div>
                  <div class="why__image why__image--big">
                     <img src="https://github.com/pow44feet/images/blob/main/03.png?raw=true" alt="Девочка в колпаке повара что-то готовит">
                  </div>
                  <h4 class="why__header">Довольные 
                                       члены семьи</h4>
               </div>
            </div>
         </div>
      </div>
   </section>

@mixin flexbox() {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;/*font-size: 0;*/}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.why {
   padding-bottom: 60px;
   overflow: hidden;
   &__top {margin-bottom: 48px; text-align: center;}
   &__body {
      @include flexbox();
      justify-content: center;
      margin: 0 -25px;
   }
   &__column {
      flex: 0 1 33.333%;
      max-width: 33.333%;
      padding: 0 25px;
   }
   &__column:first-child {margin-left: 20px;}
   &__column:last-child {margin-right: 20px;}
   &__column--big {flex: 0 1 35.5%; max-width: 35.5%;}
   &__item {
      @include flexbox();
      flex-direction: column;
      text-align: center;
      height: 100%;
   }
   &__empty {
      flex: 1 1 auto;
   }
   &__image {
      height: 100%;
      width: 100%;
      margin-bottom: 40px;
   }
   &__image img {width: 100%;}
   &__header {
      font-weight: 400;
      font-size: 20px;
      line-height: 22px;
      color: red;
      white-space: pre-line;
   }
}