Нужно обернуть каждую карточку в дополнительный блок с фиксированной высотой.
<div class="news__item-wrap">
<div class="news__item">
<div class="products__image">
<img src="https://i.ibb.co/Jm1BgzF/picture-image.jpg" alt="">
</div>
<div class="news__text">
<div class="news__title">
Выработка масла в год ...
</div>
<p class="news__description">
В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли.
</p>
</div>
</div>
</div>
.news__item-wrap {
height: 352px;
width: -webkit-calc(100% / 3 - 16px);
width: calc(100% / 3 - 16px);
margin-right: 8px;
margin-left: 8px;
padding-bottom: 15px;
margin-bottom: 35px;
}
@media screen and (max-width: 960px) {
.news__item-wrap {
width: -webkit-calc(100% / 2 - 16px);
width: calc(100% / 2 - 16px); } }
@media screen and (max-width: 767px) {
.news__item-wrap {
width: -webkit-calc(100% / 1 - 16px);
width: calc(100% / 1 - 16px); } }
.news__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #fff;
position: relative;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); }
.news__item:hover {
z-index: 2;
}