Ошибка выравнивания изображений по базовой линии в сетке с CSS

Question

Я работаю над сеткой из трех столбцов с переменным количеством элементов. Каждый элемент включает в себя изображение, заголовок и подзаголовок. Изображения имеют разные размеры, и заголовок и субтитры имеют переменную длину.

Что я хочу: Изображения должны быть выровнены по базовой линии самого высокого изображения, а также заголовок и подзаголовок под ним, как показано на рисунке. Изображения должны сохранять свои пропорции и не должны переполнять контейнер.

Пример: https://postimg.cc/PLJBmF98

Проблема: Во избежание сдвига изображений вверх, когда любой текст переносится на новую строку Я попытался установить свойство align-items: baseline в родительском контейнере. Однако, когда я изменяю размер окна, изображения на мгновение переполняют своего родителя (Пример 1, переходя от маленькой к большой ширине окна), или высота строки становится слишком большой для содержимого (Пример 2, переходя от большой к маленькой ширине окна).

Пример 1: https://postimg.cc/R67Qqw9b

Пример 2: https://postimg.cc/qhykskvz

JSFiddle: https://jsfiddle.net/t7x8Ldme/

Вот как выглядит мой CSS:

.items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px 48px;

  /* align-items: baseline; */

  .item {
    display: flex;
    flex-direction: column;

    .item-image {
      margin-top: auto;

      img {
        width: 100%;
      }
    }
  }
}

Я мог бы немного помочь с этим. Спасибо!