DaBags

Если правильно Вас понял, то для цены укажите
1 вариант:
margin-top: auto;

2 вариант:
display: flex;
flex-grow: 1;
justify-content: center;
align-items: flex-end;

3 вариант (для заголовка укажите):
flex-grow: 1;

Почему бы не ставить 2 картинки и на разных разрешениях экрана скрывать одну из них?
Как костыль попробуйте такое:
Убрать height блока
.ovca {
background-image: url('https://art-coupe.ru/bitrix/images/ovca.jpg');
background-size: 100%;
padding-bottom: 6.51%;
}
media screen and (max-width: 736px) {
.ovca {
background-image: url('https://art-coupe.ru/bitrix/images/376-ovca.jpg');
padding-bottom: 22.66%;
}
}

padding-bottom = высота картинки / ширина картинки

Пример: https://jsfiddle.net/gry7xdbt/

Попробуйте составить запросы в обратном порядке:
media (max-width: 330px) {
...
}
media (max-width: 575px) {
...
}
media (max-width: 670px) {
...
}
media (max-width: 770px) {
...
}

И используйте min-wdth, вместо max-width: max-width: 330px, min-width: 331px, min-width: 576px, (min-width: 671px) and (max-width: 770px)