<div class="row" style="margin-top: 40px;">
    <div class="col-md-9 col-sm-8">
        <div class="filterproducts-tab">
            <div class="data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
                <div class="data item title" aria-labeledby="tab-label-featured-title" data-role="collapsible" id="tab-label-featured">
                    <a class="data switch" tabindex="-1" data-toggle="switch" href="#featured" id="tab-label-featured-title">Featured</a>
                </div>
                <div class="data item content hide-addtolinks" id="featured" data-role="content">
                    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="8" column_count="4" move_actions="1" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
                </div>
                <div class="data item title" aria-labeledby="tab-label-latest-title" data-role="collapsible" id="tab-label-latest">
                    <a class="data switch" tabindex="-1" data-toggle="switch" href="#latest" id="tab-label-latest-title">Latest</a>
                </div>
                <div class="data item content hide-addtolinks" id="latest" data-role="content">
                    {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" product_count="8" column_count="4" move_actions="1" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
                </div>
            </div>
        </div>
        <div class="grid-images" style="margin:20px 0;">
            <div class="row">
                <div class="col-sm-4">
                    <div class="grid1">
                        <a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid1.jpg"}}" alt="" /></a>
                    </div>
                    <div class="grid2">
                        <a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid2.jpg"}}" alt=""></a>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="grid3">
                        <a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid3.jpg"}}" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="filterproduct-title" style="margin:0 0 10px;"><span class="content"><strong>Featured Brands</strong></span></h2>
        <div id="brands-slider-demo-8" 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-8 .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>
    <div class="col-md-3 col-sm-4 sidebar">
        <div class="custom-block" style="margin-top:44px;padding-bottom:37px;margin-bottom:15px;">
            <div class="block block-border">
                <div class="block-title">Category</div>
                <div class="block-content">
                    {{block class="Smartwave\Porto\Block\CategoryCollection" name="category_sidebar" template="Smartwave_Porto::category_side.phtml"}}
                </div>
            </div>
        </div>
        <h2 class="filterproduct-title" style="margin-top:40px;margin-bottom: 5px;"><span class="content"><strong>FROM THE BLOG</strong></span></h2>
        <div id="latest_news" class="custom-block">
            <div class="recent-posts">
                <div class="owl-carousel">
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="post-image">
                                    <img src="{{media url="wysiwyg/smartwave/porto/blog/03.jpg"}}" alt="" />
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-date">
                                    <span class="day">08</span>
                                    <span class="month">Dec</span>
                                </div>
                                <div class="postTitle">
                                    <h2><a href="#">Post Format – Video</a></h2>
                                </div>
                                <div class="postContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi…</p></div>
                                <a class="readmore" href="#">Read more &gt;</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="post-image">
                                    <img src="{{media url="wysiwyg/smartwave/porto/blog/04.jpg"}}" alt="" />
                                </div>
                            </div>
                            <div class="col-sm-7">
                                <div class="post-date">
                                    <span class="day">08</span>
                                    <span class="month">Dec</span>
                                </div>
                                <div class="postTitle">
                                    <h2><a href="#">Post Format – Image Gallery</a></h2>
                                </div>
                                <div class="postContent"><p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent…</p></div>
                                <a class="readmore" href="#">Read more &gt;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                require([
                    'jquery',
                    'owl.carousel/owl.carousel.min'
                ], function ($) {
                    $("#latest_news .owl-carousel").owlCarousel({
                        items: 1,
                        loop: true,
                        nav: false,
                        dots: true
                    });
                });
            </script>
        </div>
        <h2 style="font-weight:600;font-size:20px;color:#000;line-height:1;">Custom HTML Block</h2>
        <h5 style="font-family:Arial;font-weight:400;font-size:11px;color:#878787;line-height:1;margin-bottom:13px;">This is a custom sub-title.</h5>
        <p style="font-weight:400;font-size:14px;color:#666;line-height:1.42;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi. Etiam non tellus </p>
    </div>
</div>
<style type="text/css">
.recent-posts .item .col-sm-5, .recent-posts .item .col-sm-7 {
    width: 100%;
}
</style>