<div class="porto-brand w-100" style="padding-top: 45px;padding-bottom: 45px;">
  <div class="porto-carousel brand-carousel owl-carousel mb-0">
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand1.png&quot;}}" alt="" /></div>
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand2.png&quot;}}" alt="" /></div>
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand3.png&quot;}}" alt="" /></div>
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand4.png&quot;}}" alt="" /></div>
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand5.png&quot;}}" alt="" /></div>
    <div class="item"><img src="{{media url=&quot;wysiwyg/smartwave/porto/homepage/27/shop27_brand6.png&quot;}}" alt="" /></div>
  </div>
  <script type="text/javascript">
    require(["jquery", "owl.carousel/owl.carousel.min"], function ($) {
      $(".brand-carousel.owl-carousel").owlCarousel({
        autoplay: false,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        loop: false,
        responsive: {
          0: {
            items: 2,
          },
          640: {
            items: 2,
          },
          768: {
            items: 3,
          },
          992: {
            items: 4,
          },
          1200: {
            items: 6,
          },
        },
      });
    });
  </script>
</div>