Сжались картинки на flex'ах, если уменьшить экран. Сплющились 2 и 3 картинки - внутри border и сам border. Где косяк? Спасибо

<ul class="hero-list">
  <li class="hero-list__item">
    <div class="hero-list__image">
      <img src="img/hero/clock.png" alt="clock">
    </div>
    <span class="hero-list__text">Точно соблюдаем сроки</span>
  </li>
  <li class="hero-list__item">
    <div class="hero-list__image">
      <img src="img/hero/calculator.png" alt="calculator">
    </div>
    <span class="hero-list__text">Рассчитываем смету на работы и материалы в день обращения</span>
  </li>
  <li class="hero-list__item">
    <div class="hero-list__image">
      <img src="img/hero/paint-board.png" alt="paint-board">
    </div>
    <span class="hero-list__text">Предложим более 100 вариантов исполнения дизайна Вашего жилья</span>
  </li>
</ul>

.hero-list {
      margin: 0;
      padding: 0;
    }

    .hero-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 25px;
    }

    .hero-list__image {
      width: 40px;
      height: 40px;
      border: 2px solid #ffd200;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      border-radius: 50%;
      margin-right: 30px;
    }

    .hero-list__text {
      max-width: 300px;
    }

    @media (max-width: 768px) {
      .hero-block {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
      .hero-text__title {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 15px;
      }
      .hero-text__subtitle {
        font-size: 16px;
        margin-bottom: 28px;
      }
      .hero-list {
        margin-bottom: 20px;
        margin-right: 15px;
      }
      .hero-list__text {
        font-size: 12px;
      }