ma4t

Омагад как не удобно разметку читать.
Я так понял они у вас растягиваются лишнего по вертикали.
В общем родителю который содержит эти три строки, напишите display: flex; flex-direction: column, align-items: center, justify-content: center; И все
а каждому дитю, margin-bottom: какой Вам нужен
Один из способов

вроде бы flex-direction: column в каких-то браузерах тупит. ТАк что можно добавить обертку еще
И сделать иначе

<div class='1' style="dysplay:flex, align-items: center, justify-content:center" padding='15px 20px'>
      <div class='2'>
           <div class='text' style='margin-bottom='10px'>Зерно</div>
           <div class='text' style='margin-bottom='10px'>123</div>
           <div class='text'>год годовый</div>
      </div>
  <div/>

я использовал эти две объекта, импорт делал таким образом как на картинке

подробнее про picture fill
https://scottjehl.github.io/picturefill/

Obj-fit-imgs работает как cover или contain, если используются картинки контентно, а не через background-image

а полифил пикча, дабы в IE тоже работала возможность подстановки изображение через теги source у тега picture

ваш тоже должен работать. скорее всего подключаете не правильно

ну да, правильно написали, Вы задали жесткую ширину элементам и хотите чтобы в меньшую область они у Вас полезли. Можно оставить жестко, но Надо делать Адаптивы, в определенной точке при небольшой ширине экрана, уменьшать ширину блоков (их размеры) через media запросы

$(.sights__item-title).parent().prev().children().addClass('.sights__image_hover');

если так не найдет то поменять на

$(.sights__item-title).parent().prev().children().first().addClass('.sights__image_hover');

а вообще ваш код должен сработать

просто надо написать parents, а не parent

Попробуйте применить https://autoprefixer.github.io/ru/