Как можно изменить размер изображения, когда на него наводят курсором мыши?

Для изменения размера изображения при наведении на него курсором мыши можно использовать CSS псевдокласс `:hover` вместе с свойством `transform: scale()`. Например, чтобы увеличить размер изображения в 1.2 раза при наведении, можно добавить следующий CSS код:

```css
.variantsmk__image img:hover {
  transform: scale(1.2);
}
```

Чтобы настроить элемент так, чтобы при наведении на него появлялся текст, а картинка занимала только оставшееся свободное место, в зависимости от длины текста, можно воспользоваться CSS псевдоклассом `:hover` и свойствами `overflow` и `text-overflow`. Например, чтобы отобразить текст, когда на элемент наведен курсор мыши, можно добавить следующий CSS код:

```css
.variantsmk__column:hover .variantsmk__description {
  display: block;
}
```

А чтобы ограничить ширину изображения, чтобы текст занимал оставшееся свободное место, можно добавить следующий CSS код:

```css
.variantsmk__column {
  display: flex;
}

.variantsmk__image {
  flex: 0 0 auto;
}

.variantsmk__description {
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

Вместо использования JavaScript для расчета высоты и изменения размера элементов, можно воспользоваться возможностями CSS.