Доброго всем дня! Мучаюсь с такой задачкой, каталог товаров в три колонки карточек, пример карточки

            <li class="lots-item">
<div class="wrap-item">
<img class="img-item" src="./img/foto_1_4.jpg">
<h3 class="lot-name">Носки шерстяные Адидас</h3>
<div class="wrap-price">
<div class="price">
<span class="currency">$</span>
<span class="price-int">15</span>
<span class="price-double">.00</span>
</div>
<button class="button-lot-add">Add to Cart</button>
</div>
<div class="stars-wrap">
<span class="stars"></span>
</div>
<div class="description"> </div>
</div>
</li>



нужно сделать чтобы в карточках все блоки были на одном уровне,
сначала все просто <img> одной высоты
а вот потом идет имя товара .lot-name оно в зависимости от количества букав может быть в от одной строки до например пяти
из-за этого все что идет ниже оказывается на разных уровнях (одна карточка получается короче другая длинней)
если растянуть через flex-grow то высота выравнивается но и ширина разъезжается и я не попадаю в макет
как быть в такой ситуации помогите новичку пожалуйста
.lots-list {
margin: 0;
padding: 0;

display: grid;
grid-template-columns: 157px 157px 157px;
}

.lots-item{
margin: 0;
padding: 0;
position: relative;
list-style: none;
}

.wrap-item {
margin: 0;
padding: 0;

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}

.img-item {
margin-top: 13px;

}

.lot-name {

width: 135px;
/* flex-grow: 1; */
height: auto;

word-wrap: break-word;
font-family: inherit;
font-size: inherit;
font-weight: normal;
line-height: 16px;
}