Container Wrapper, Carousel Items, Background Overlay Sample Template

<style>
#{page}-{section}-container .item-link .overlay {
 position: absolute;
 width: 100%;
 height: 100%;
 background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 95%);
 z-index: 999;
}
#flex-example .flex-item {
 /** https://css-tricks.com/snippets/css/a-guide-to-flexbox/ **/
 flex: 0 0;
}
</style>

<div class="{page}-{section}-container-wrapper">
 <div id="{page}-{section}-container" class="container">
 <div class="row">
 <div id="flex-example" class="col-lg-12 d-flex flex-wrap">
 <div class="flex-item"></div>
 <div class="flex-item"></div>
 <div class="flex-item"></div>
 </div>
 <div class="col-lg-12">
 <div id="{page}-{section}-carousel" class="owl-carousel owl-theme">
 <div class="item">
 <a href="#" class="item-link">
 <div class="overlay"></div>
 <img src="#" class="item-thumb">
 <div class="item-text">
 <h3 class="item-name"></h3>
 <p class="item-desc"></p>
 <!-- <a href="#" class="stretched-link">More</a> -->
 </div> 
 </a>
 </div>
 
 <script>
 jQuery(document).ready(function(){
 jQuery('#{page}-{section}-carousel.owl-carousel').owlCarousel(
 {
 nav:true,
 dots:true,
 responsive:{
 0:{
 items:1
 },
 600:{
 items:3
 }
 }
 } 
 );
 });
 </script>
 </div>
 </div>
 </div>
 </div>
</div>