Gallery with Carousel

                  
                    <!-- Images Carousel -->
                    <div class="js-slick-carousel u-slick u-slick--gutters-2"
                         data-infinite="true"
                         data-slides-show="1"
                         data-slides-scroll="1"
                         data-center-mode="true"
                         data-center-padding="200px"
                         data-pagi-classes="text-center u-slick__pagination mt-5 mb-0"
                         data-responsive='[{
                           "breakpoint": 992,
                           "settings": {
                             "centerPadding": "120px"
                           }
                         }, {
                           "breakpoint": 768,
                           "settings": {
                             "centerPadding": "80px"
                           }
                         }, {
                           "breakpoint": 554,
                           "settings": {
                             "centerPadding": "50px"
                           }
                         }]'>
                      <div class="js-slide rounded bg-img-hero min-height-450" style="background-image: url(../../assets/img/1200x800/img1.jpg);"></div>
                      <div class="js-slide rounded bg-img-hero min-height-450" style="background-image: url(../../assets/img/1200x800/img2.jpg);"></div>
                      <div class="js-slide rounded bg-img-hero min-height-450" style="background-image: url(../../assets/img/1200x800/img3.jpg);"></div>
                    </div>
                    <!-- End Images Carousel -->
                  
                

                  
                    <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
                  
                

                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.slick-carousel.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of slick carousel
                        $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
                      });
                    </script>
                  
                

                  
                    <!-- Images Carousel Section -->
                    <div class="overflow-hidden">
                      <div class="js-slick-carousel u-slick u-slick--gutters-2"
                           data-infinite="true"
                           data-slides-show="2"
                           data-slides-scroll="1"
                           data-center-mode="true"
                           data-center-padding="200px"
                           data-responsive='[{
                             "breakpoint": 992,
                             "settings": {
                             "slidesToShow": 2,
                               "centerPadding": "120px"
                             }
                           }, {
                             "breakpoint": 768,
                             "settings": {
                             "slidesToShow": 1,
                               "centerPadding": "80px"
                             }
                           }, {
                             "breakpoint": 554,
                             "settings": {
                             "slidesToShow": 1,
                               "centerPadding": "50px"
                             }
                           }]'>
                        <div class="js-slide rounded bg-img-hero min-height-300" style="background-image: url(../../assets/img/900x450/img6.jpg);"></div>
                        <div class="js-slide rounded bg-img-hero min-height-300" style="background-image: url(../../assets/img/900x450/img7.jpg);"></div>
                        <div class="js-slide rounded bg-img-hero min-height-300" style="background-image: url(../../assets/img/900x450/img8.jpg);"></div>
                        <div class="js-slide rounded bg-img-hero min-height-300" style="background-image: url(../../assets/img/900x450/img9.jpg);"></div>
                        <div class="js-slide rounded bg-img-hero min-height-300" style="background-image: url(../../assets/img/900x450/img10.jpg);"></div>
                      </div>
                    </div>
                    <!-- End Images Carousel Section -->
                  
                

                  
                    <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
                  
                

                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.slick-carousel.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of slick carousel
                        $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
                      });
                    </script>