<div class="list-product-bottom">
<div class="row">
<div class="col-lg-4 list-products">
<div class="slider-2">{{block class="Sm\FilterProducts\Block\FilterProducts" template="Sm_FilterProducts::default-slider-list-id16.phtml" title_module="Latest Products" display_countdown="0" product_source="lastest_products" select_category="212,213,214,215,216,217,218" product_limitation="6"}}</div>
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel'
	], function ($) {
		$(".slider-2 .block-content-products").owlCarousel({
			autoplay:false,
			nav : true, 
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:20,
			
			responsive: {
				0: {
					items:1
				},
				480: {
					items:1
				},
				768: {
					items:1
				},
				991: {
					items:1
				},
				
				1200: {
					items:1
				},
			},
		});	  
	});		
				
				
</script>
</div>
<div class="col-lg-4 list-products">
<div class="slider-3">{{block class="Sm\FilterProducts\Block\FilterProducts" template="Sm_FilterProducts::default-slider-list-id16.phtml" title_module="Featured Products" display_countdown="0" product_source="featured_products" select_category="212,213,214,215,216,217,218" product_limitation="6"}}</div>
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel'
	], function ($) {
		$(".slider-3 .block-content-products").owlCarousel({
			autoplay:false,
			nav : true, 
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:20,
			
			responsive: {
				0: {
					items:1
				},
				480: {
					items:1
				},
				768: {
					items:1
				},
				991: {
					items:1
				},
				
				1200: {
					items:1
				},
			},
		});	  
	});		
				
				
</script>
</div>
<div class="col-lg-4 list-products">
<div class="slider-4">{{block class="Sm\FilterProducts\Block\FilterProducts" template="Sm_FilterProducts::default-slider-list-id16.phtml" title_module="Most Reviewed" display_countdown="0" product_source="lastest_products" select_category="212,213,214,215,216,217,218" product_limitation="6"}}</div>
<script type="text/javascript">
	require([
		'jquery',
		'owlcarousel'
	], function ($) {
		$(".slider-4 .block-content-products").owlCarousel({
			autoplay:false,
			nav : true, 
			dots: false,
			autoplaySpeed : 500,
			navSpeed : 500,
			dotsSpeed : 500,
			autoplayHoverPause: true,
			margin:20,
			
			responsive: {
				0: {
					items:1
				},
				480: {
					items:1
				},
				768: {
					items:1
				},
				991: {
					items:1
				},
				
				1200: {
					items:1
				},
			},
		});	  
	});		
				
				
</script>
</div>
</div>
</div>
<div class="list-brand lazyload-container">
<div class="row">
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-1.jpg"}}" alt="Brand Image" /></a></div>
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-2.jpg"}}" alt="Brand Image" /></a></div>
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-3.jpg"}}" alt="Brand Image" /></a></div>
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-4.jpg"}}" alt="Brand Image" /></a></div>
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-5.jpg"}}" alt="Brand Image" /></a></div>
<div class="col-lg-2 col-md-4 col-6 item-brand"><a title="Brand Image" href="#"><img class="mark-lazy" src="{{media url="wysiwyg/brand/brand-16-6.jpg"}}" alt="Brand Image" /></a></div>
</div>
</div>