Создание изображения и текстовой сетки с отзывчивым css background-image

Question

Эта страница онлайн-магазина отображает товары в строках по 4 элемента и отображает изображение товара, название и цену. После переключения с использования <img> на <div> с background-image (для реализации background-blend-mode) я борюсь с отзывчивым отображением изображения продукта и высоты элемента-коробки.

Гирд использует jquery, bootstrap и matchHeight. js

<div class="col-lg-3 col-6">
        <a href="http://xd.klomfar.at/produkt/papierkorb-waeschekorb-weiss-ohne-deckel/" class="prod-box" data-mh="mh" style="height: 364px;">
             <div class="prod-img-nest">
                 <div class="prod-img" style="background-image: url(''),
url('http://xd.klomfar.at/wp-content/uploads/2018/07/papierkorb-weiß-klomfar-1-370x370.jpg');   background-blend-mode: multiply; background-size: 100%, contain; background-position: center center;">
                 </div>
                 <!-- OLD IMAGE solution <img src="http://xd.klomfar.at/wp-content/uploads/2018/07/papierkorb-weiß-klomfar-1-370x370.jpg" class="attachment-product-thumb-size size-product-thumb-size wp-post-image wp-post-image" />-->
                <div class="name">Papierkorb / Wäschekorb</div>
                <div class="desc">
                    Edelstahl Weiß matt, in zwei Größen
                </div>
                <div class="price">
                    <strong><span class="woocommerce-Price-amount amount">24,00 <span class="woocommerce-Price-currencySymbol">€</span></span> – <span class="woocommerce-Price-amount amount">34,00 <span class="woocommerce-Price-currencySymbol">€</span></span> EUR</strong>
                 </div>
              </div>                
        </a>
</div>

https://codepen.io/thaFlow/pen/RwPBGyG

Итак, как мне получить содержимое в <div> и убедитесь, что изображение отзывчиво, не повторяется или не переполняется?