<div class="row" style="margin: 15px -8px 0 -8px;">
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">FEATURED</h4>
        <div id="featured_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#featured_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">SALES</h4>
        <div id="sales_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#sales_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
    <div class="col-sm-4 one-product" style="padding-left: 8px; padding-right: 8px;">
        <h4 class="filterproduct-title">NEW ARRIVALS</h4>
        <div id="new_product" class="hide-addtocart hide-addtolinks">
            {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="3" aspect_ratio="0" image_width="350" image_height="350" template="owl_list.phtml"}}
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#new_product .owl-carousel").owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    nav: false,
                    dots: true,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true,
                    items: 1
                });
            });
        </script>
    </div>
</div>
<div class="single-images" style="padding-top: 15px;">
    <div class="row" style="margin-left:-7px;margin-right:-7px;">
        <div class="col-sm-3 col-xs-6" style="padding-left:7px;padding-right:7px;padding-bottom:15px;">
            <a class="image-link" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid1.jpg"}}" alt="" />
            </a>
        </div>
        <div class="col-sm-3 col-xs-6" style="padding-left:7px;padding-right:7px;padding-bottom:15px;">
            <a class="image-link" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid2.jpg"}}" alt="" />
            </a>
        </div>
        <div class="col-sm-3 col-xs-6" style="padding-left:7px;padding-right:7px;padding-bottom:15px;">
            <a class="image-link" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid3.jpg"}}" alt="" />
            </a>
        </div>
        <div class="col-sm-3 col-xs-6" style="padding-left:7px;padding-right:7px;padding-bottom:15px;">
            <a class="image-link" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid4.jpg"}}" alt="" />
            </a>
        </div>
     </div>
</div>
<div style="padding: 10px 20px 20px;background-color: #fff;">
    {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="featured_product" product_count="8" column_count="4" aspect_ratio="1" image_width="300" template="grid.phtml"}}
</div>
<div class="shop-features" style="background-color:#fff; margin-top:13px; padding: 35px 0;">
    <div class="row">
        <div class="col-sm-4">
            <em class="porto-icon-star" style="border:0;"></em>
            <h3>DEDICATED SERVICE</h3>
            <p style="padding: 0 60px;">Consult our specialists for help with an order, customization, or design advice.</p>
            <a href="#">Get in Touch &gt;</a>
        </div>
        <div class="col-sm-4">
            <em class="porto-icon-reply" style="border:0;"></em>
            <h3>FREE RETURNS</h3>
            <p style="padding: 0 60px;">We stand behind our goods and services and want you to be satisfied with them.</p>
            <a href="#">Returns Policy &gt;</a>
        </div>
        <div class="col-sm-4">
            <em class="porto-icon-paper-plane" style="border:0;"></em>
            <h3>INTERNATIONAL SHIPPING</h3>
            <p style="padding: 0 70px;">Currently over 50 countries qualify for express international shipping.</p>
            <a href="#">Learn More &gt;</a>
        </div>
    </div>
</div>
<div class="col-md-12" style="padding: 20px;background-color:#fff;">
    <div id="brands-slider-demo-7" class="brands-slider">
        <div class="owl-carousel">
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand1.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand2.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand3.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand4.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand5.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand1.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand2.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand3.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand4.png"}}" alt="" /></div>
            <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand5.png"}}" alt="" /></div>
        </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#brands-slider-demo-7 .owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                margin: 30,
                nav: false,
                dots: true,
                loop: true,
                responsive: {
                    0: {
                        items:2
                    },
                    640: {
                        items:3
                    },
                    768: {
                        items:4
                    },
                    992: {
                        items:5
                    },
                    1200: {
                        items:6
                    }
                }
            });
        });
    </script>
    </div>
</div>