Марджин я использую как отступ (общий).
.Products__wrapper {
margin-left: 6.9%;
margin-right: 7.2%;
}Эти два блока по задумке должны прижиматься к краям.
Тогда будет у правого края небольшой отступ, который не нужен
margin-right: 7.2%;
А если не менять?
Когда я задаю высоту картинке у меня текст при адаптировании выпадает за блок
Если оставить ширину и применить object-fit:cover; ничего не происходит.
Вы предлагаете использовать в процентах размеры?
потому что картинка сама намного больше.
.img__cream { width: 600px; height: 484px; object-fit: fill; }
width: 100%;
height: 100%;
object-fit: cover; /*или contain*/height: 812px;<div><img src="" alt=""></div>Или как добавить class в ссылку на изображение?
<a href=""></a><a class="yourclass" href=""></a>
И совсем нет стилей.
Поэтому не видно, что вы пытались сделать.
Самый простой способ: обернуть весь текст в div.
Вариант сложнее и нужно точно знать количество элементов слева: просто картинку задаете grid-row и указываете сколько строк она должна занять.
Чтобы он пахал, картинка должна быть первой в коде и родитель не должен быть гридом или флексом.