JavaScript: максимальная высота: NaN

На страницах коллекций нашего сайта Shopify кнопки СМОТРЕТЬ ДЕТАЛИ на каждой карточке продукта смещены из-за разной длины названия продукта. Чтобы выровнять их, мы решили установить минимальную высоту названий продуктов всех карточек продуктов подряд на самую высокую из трех в одной строке, используя чистый JavaScript. Ниже приведена полная логика для достижения этого.

Логика:

• Найти ВСЕ селекторы ".card__info"
• Установите количество карточек в строке для проверки на основе window.innerWidth
• Установите максимальную высоту = 0;
• Для каждого селектора card__info выполните следующее:
  • Получить карту__название
  • Получите высоту.
  • Установите максимальную высоту = максимальную (max_height, новая высота)
• Для каждого селектора card__info выполните следующее:
  • Получить карту__название
  • Установите минимальную высоту на максимальное значение.

Идеально - делать это построчно окно.innerWidth 768px и выше — 3 столбца еще 2 столбца

Приведенный ниже код — это только первая часть решения. Вывод, который я получаю в консоли, это Max Height: NaN вместо фактической высоты, потому что на странице коллекции, указанной ниже, есть 15 продуктов с их названиями.

Код JavaScript:

//  Find All selectors of ".card__info"
let allCardInfo = document.querySelectorAll(".card__info");
//  Set number of cards per row, to check based on window.innerWidth
var numCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2);
var maxHeight = 0; //  Set max height = 0;
//  Foreach card__info selector, execute the following:
allCardInfo.forEach(element => {
  let cardTitle = element.querySelector(".card__title");   // Get the card__title
  let cardTitleHeight = cardTitle.height;   // Get the height.
  // Set max height = max (max_height, new height)
  maxHeight = Math.max(maxHeight, cardTitleHeight);
  console.info('Max Height: ' + maxHeight);
});