Для того чтобы сделать заголовки в карточках товаров одинаковой высоты, можно использовать следующий подход:
1. Установить для всех заголовков товаров одинаковую высоту, задав свойство `height` через CSS.
2. Если некоторые заголовки содержат дополнительную информацию (такую как "в наличии"), то можно выделить эту информацию отдельным блоком внутри заголовка. Например, использовать элемент `span` для этой информации и задать ему свойство `display: block;` для переноса текста на новую строку.
3. Для случаев, когда заголовок занимает больше одной строки на мобильных устройствах, можно использовать медиа-запросы в CSS для адаптивного изменения высоты заголовка согласно размеру экрана устройства.
Пример CSS для выравнивания высоты заголовков товаров:
```css
.product-title {
height: 60px; /* устанавливаем высоту заголовка */
}
.product-title span {
display: block; /* отдельная строка для дополнительной информации */
}
@media only screen and (max-width: 768px) {
.product-title {
height: auto; /* изменяем высоту на авто для мобильных устройств */
}
}
```
Таким образом, с помощью CSS/SCSS можно легко выровнять высоту заголовков товаров даже при наличии дополнительной информации и адаптировать эту высоту для различных размеров экранов.