Meu layout hoje utiliza esse template com este carousel de itens https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=multiple-item-product-carousel

Só que a cada 4 itens do carousel tem uma quebra de tags html. Isso está atrapalhando o carregamento dos meus registros dinamicamente.

Preciso de ajuste no css deste carousel que permita add atraves de um loop o html :<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"><i class="fa fa-heart-o"></i></span>
<div class="img-box">
<img src="/examples/images/products/headphone.jpg" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Sony Headphone</h4>
<div class="star-rating">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-o"></i></li>
</ul>
</div>
<p class="item-price"><strike>$25.00</strike> <b>$23.99</b></p>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
e ele controlar as quebras de 4 em 4 e paginacao.

Como é feito hoje nesse layout:
https://codepen.io/Qvatra/pen/yOvBoM
Se eu add N registros em um loop com <div class="item">
<div class="carousel-col">
<div class="block green img-responsive"></div>
</div>
</div> funciona perfeito.
Se for complicado aceito também um merge do segundo com o conteudo dos cards do primeiro.