{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-products" %}
{% set title = "Product Blocks" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Product Blocks v1 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-pos-rel g-rounded-4 g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center g-transition-0_3 g-transition--linear">
                    <!-- Article Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">

                      <!-- Image Caption -->
                      <figcaption class="u-ribbon-v1 g-color-white g-bg-purple-opacity-0_7 g-font-weight-700 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Template</figcaption>
                      <!-- End Image Caption -->
                    </figure>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-bg-secondary g-pa-30">
                      <h3 class="h4">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">One Page Template</a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your brand.</p>
                      <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-pos-rel g-rounded-4 g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center g-transition-0_3 g-transition--linear">
                    <!-- Article Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">

                      <!-- Image Caption -->
                      <figcaption class="u-ribbon-v1 g-color-white g-bg-blue-opacity-0_7 g-font-weight-700 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Design</figcaption>
                      <!-- End Image Caption -->
                    </figure>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-bg-secondary g-pa-30">
                      <h3 class="h4">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Mockup Design</a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your brand.</p>
                      <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-sm-6 col-md-4 g-mb-30">
                  <!-- Article -->
                  <article class="g-pos-rel g-rounded-4 g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center g-transition-0_3 g-transition--linear">
                    <!-- Article Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Image Description">

                      <!-- Image Caption -->
                      <figcaption class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-weight-700 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Web</figcaption>
                      <!-- End Image Caption -->
                    </figure>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-bg-secondary g-pa-30">
                      <h3 class="h4">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">HTML5/CSS3 + PHP</a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your brand.</p>
                      <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v1 -->

      <!-- Product Blocks v2 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-rounded-bottom-4">
                    <!-- Figure Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">
                    </figure>
                    <!-- End Figure Image -->

                    <!-- Article Content -->
                    <div class="g-pa-30">
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Rigging in Autodesk 3Ds Max</a>
                      </h3>

                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13 g-line-height-1 g-mb-20">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v4 g-pr-8 g-mr-3">
                          Web
                        </li>
                        <li class="list-inline-item">
                          <span>5 hours ago</span>
                        </li>
                      </ul>

                      <div class="g-mb-30">
                        <p>We strive to figure out the right solutions for your look to stand out amongst the rest.</p>
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-15 g-mb-30">

                      <!-- Article Images -->
                      <ul class="list-inline g-mb-20">
                        <li class="list-inline-item">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-color-gray-dark-v5 g-font-size-12">
                          +21
                        </li>
                      </ul>
                      <!-- End Article Images -->

                      <footer class="d-flex justify-content-between align-items-center">
                        <!-- Figure Comments -->
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-font-weight-600 g-ml-5">10</span>
                        </a>
                        <!-- End Figure Comments -->

                        <!-- Figure Button -->
                        <div class="d-block">
                          <a class="btn btn-md u-btn-primary u-btn-3d g-font-weight-600 g-font-size-11 text-uppercase" href="#">Join us</a>
                        </div>
                        <!-- End Figure Button -->
                      </footer>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-rounded-4">
                    <!-- Figure Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                    </figure>
                    <!-- End Figure Image -->

                    <!-- Article Content -->
                    <div class="g-pa-30">
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Getting Started Photography</a>
                      </h3>

                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13 g-line-height-1 g-mb-20">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v4 g-pr-8 g-mr-3">
                          Photo
                        </li>
                        <li class="list-inline-item">
                          <span>7 hours ago</span>
                        </li>
                      </ul>

                      <div class="g-mb-30">
                        <p>We strive to figure out the right solutions for your look to stand out amongst the rest.</p>
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-15 g-mb-30">

                      <!-- Article Images -->
                      <ul class="list-inline g-mb-20">
                        <li class="list-inline-item">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img3.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-color-gray-dark-v5 g-font-size-12">
                          +5
                        </li>
                      </ul>
                      <!-- End Article Images -->

                      <footer class="d-flex justify-content-between align-items-center">
                        <!-- Figure Comments -->
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-font-weight-600 g-ml-5">05</span>
                        </a>
                        <!-- End Figure Comments -->

                        <!-- Figure Button -->
                        <div class="d-block">
                          <a class="btn btn-md u-btn-primary u-btn-3d g-font-weight-600 g-font-size-11 text-uppercase" href="#">Join us</a>
                        </div>
                        <!-- End Figure Button -->
                      </footer>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-rounded-4">
                    <!-- Figure Image -->
                    <figure>
                      <img class="w-100" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                    </figure>
                    <!-- End Figure Image -->

                    <!-- Article Content -->
                    <div class="g-pa-30">
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Powerful influencers</a>
                      </h3>

                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13 g-line-height-1 g-mb-20">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v4 g-pr-8 g-mr-3">
                          Word
                        </li>
                        <li class="list-inline-item">
                          <span>12 hours ago</span>
                        </li>
                      </ul>

                      <div class="g-mb-30">
                        <p>We strive to figure out the right solutions for your look to stand out amongst the rest.</p>
                      </div>

                      <hr class="g-brd-gray-light-v4 g-mt-15 g-mb-30">

                      <!-- Article Images -->
                      <ul class="list-inline g-mb-20">
                        <li class="list-inline-item">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-ml-minus-20">
                          <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                            <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                          </div>
                        </li>
                        <li class="list-inline-item g-color-gray-dark-v5 g-font-size-12">
                          +46
                        </li>
                      </ul>
                      <!-- End Article Images -->

                      <footer class="d-flex justify-content-between align-items-center">
                        <!-- Figure Comments -->
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-size-13 g-text-underline--none--hover" href="#">
                          <i class="icon-finance-206 u-line-icon-pro"></i>
                          <span class="g-font-weight-600 g-ml-5">32</span>
                        </a>
                        <!-- End Figure Comments -->

                        <!-- Figure Button -->
                        <div class="d-block">
                          <a class="btn btn-md u-btn-primary u-btn-3d g-font-weight-600 g-font-size-11 text-uppercase" href="#">Join us</a>
                        </div>
                        <!-- End Figure Button -->
                      </footer>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v2 -->

      <!-- Product Blocks v3 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#03</span>
          </h2>
        </div>

        <div id="shortcode3">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="row">
              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="g-bg-white g-pos-rel">
                  <!-- Carousel Images -->
                  <div class="js-carousel g-mb-5"
                       data-pagi-classes="u-carousel-indicators-v5">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                  </div>
                  <!-- End Carousel Images -->

                  <div class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Design</div>

                  <!-- Article Content -->
                  <div class="g-py-15">
                    <h3 class="h5">Savoy Hotel London</h3>
                    <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-20">
                      <li>
                        <span class="g-color-primary">Position:</span>
                        Manager / Executive
                      </li>
                      <li>
                        <span class="g-color-primary">Required:</span>
                        5 - years of experience
                      </li>
                    </ul>
                    <a href="#" class="btn btn-md u-btn-outline-primary g-font-weight-600 g-font-size-11 text-uppercase">Explore</a>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="g-pos-rel g-bg-white">
                  <!-- Carousel Images -->
                  <div class="js-carousel g-mb-5"
                       data-pagi-classes="u-carousel-indicators-v5">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                  </div>
                  <!-- End Carousel Images -->

                  <div class="u-ribbon-v1 g-color-white g-bg-red-opacity-0_5 g-font-weight-600 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Marketing</div>

                  <!-- Article Content -->
                  <div class="g-py-15">
                    <h3 class="h5">Thomas Cook Holidays</h3>
                    <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-20">
                      <li>
                        <span class="g-color-primary">Position:</span>
                        Manager / Executive
                      </li>
                      <li>
                        <span class="g-color-primary">Required:</span>
                        7 - years of experience
                      </li>
                    </ul>
                    <a href="#" class="btn btn-md u-btn-outline-primary g-font-weight-600 g-font-size-11 text-uppercase">Explore</a>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="g-pos-rel g-bg-white">
                  <!-- Carousel Images -->
                  <div class="js-carousel g-mb-5"
                       data-pagi-classes="u-carousel-indicators-v5">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Image Description">
                    <img class="rounded" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Image Description">
                  </div>
                  <!-- End Carousel Images -->

                  <div class="u-ribbon-v1 g-color-white g-bg-blue-opacity-0_7 g-font-weight-600 g-font-size-11 text-uppercase g-top-10 g-left-10 rounded">Education</div>

                  <!-- Article Content -->
                  <div class="g-py-15">
                    <h3 class="h5">University of Aberdeen</h3>
                    <ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13 g-mb-20">
                      <li>
                        <span class="g-color-primary">Position:</span>
                        Education / Training
                      </li>
                      <li>
                        <span class="g-color-primary">Required:</span>
                        10 - years of experience
                      </li>
                    </ul>
                    <a href="#" class="btn btn-md u-btn-outline-primary g-font-weight-600 g-font-size-11 text-uppercase">Explore</a>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode3" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v3 -->

      <!-- Product Blocks v4 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white">
                    <!-- Article Image -->
                    <div class="g-pos-rel">
                      <img class="w-100" src="{{ root }}assets/img-temp/600x450/img6.jpg" alt="Image Description">

                      <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-10 g-right-10 rounded p-0">
                        <span class="d-block g-color-white g-py-15">$25</span>
                        <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-rounded-bottom-3 g-py-15">30%
                          <small class="g-font-size-12">save</small>
                        </span>
                      </div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="u-shadow-v19 g-pa-30">
                      <header class="g-mb-15">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                        <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">12 Reviews</span>
                      </header>

                      <!-- Article Info -->
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Finding your perfect plan</a>
                      </h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white">
                    <!-- Article Image -->
                    <div class="g-pos-rel">
                      <img class="w-100" src="{{ root }}assets/img-temp/600x450/img3.jpg" alt="Image Description">

                      <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-10 g-right-10 rounded p-0">
                        <span class="d-block g-color-white g-py-15">$39</span>
                        <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-rounded-bottom-3 g-py-15">75%
                          <small class="g-font-size-12">save</small>
                        </span>
                      </div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="u-shadow-v19 g-pa-30">
                      <header class="g-mb-15">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                        <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">07 Reviews</span>
                      </header>

                      <!-- Article Info -->
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Creative digital agency</a>
                      </h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="text-center g-bg-white">
                    <!-- Article Image -->
                    <div class="g-pos-rel">
                      <img class="w-100" src="{{ root }}assets/img-temp/600x450/img2.jpg" alt="Image Description">

                      <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-10 g-right-10 rounded p-0">
                        <span class="d-block g-color-white g-py-15">$50</span>
                        <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-rounded-bottom-3 g-py-15">20%
                          <small class="g-font-size-12">save</small>
                        </span>
                      </div>
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="u-shadow-v19 g-pa-30">
                      <header class="g-mb-15">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                        <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">20 Reviews</span>
                      </header>

                      <!-- Article Info -->
                      <h3 class="h4 g-mb-10">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Your creative squad</a>
                      </h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v4 -->

      <!-- Product Blocks v5 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#05</span>
          </h2>
        </div>

        <div id="shortcode05">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="row">
              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="text-center g-bg-white">
                  <!-- Article Image -->
                  <div class="g-pos-rel">
                    <img class="w-100" src="{{ root }}assets/img-temp/600x450/img1.jpg" alt="Image Description">

                    <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-0 g-left-0 p-0">
                      <span class="d-block g-color-white g-py-15">$25</span>
                      <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-py-15">30%
                        <small class="g-font-size-12">save</small>
                      </span>
                    </div>
                  </div>
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <header class="g-mb-15">
                      <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                      <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">12 Reviews</span>
                    </header>

                    <!-- Article Info -->
                    <h3 class="h4 g-mb-10">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Finding your perfect plan</a>
                    </h3>
                    <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="text-center g-bg-white">
                  <!-- Article Image -->
                  <div class="g-pos-rel">
                    <img class="w-100" src="{{ root }}assets/img-temp/600x450/img7.jpg" alt="Image Description">

                    <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-0 g-left-0 p-0">
                      <span class="d-block g-color-white g-py-15">$39</span>
                      <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-py-15">75%
                        <small class="g-font-size-12">save</small>
                      </span>
                    </div>
                  </div>
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <header class="g-mb-15">
                      <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                      <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">07 Reviews</span>
                    </header>

                    <!-- Article Info -->
                    <h3 class="h4 g-mb-10">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Creative digital agency</a>
                    </h3>
                    <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="text-center g-bg-white">
                  <!-- Article Image -->
                  <div class="g-pos-rel">
                    <img class="w-100" src="{{ root }}assets/img-temp/600x450/img8.jpg" alt="Image Description">

                    <div class="u-ribbon-v1 g-width-55 g-bg-primary g-font-weight-600 g-font-size-17 g-top-0 g-left-0 p-0">
                      <span class="d-block g-color-white g-py-15">$50</span>
                      <span class="d-block g-bg-white g-color-primary g-line-height-0_8 g-py-15">20%
                        <small class="g-font-size-12">save</small>
                      </span>
                    </div>
                  </div>
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <header class="g-mb-15">
                      <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-10" data-rating="5"></div>
                      <span class="d-inline-block g-color-gray-dark-v5 g-font-weight-600 g-font-size-10 text-uppercase">20 Reviews</span>
                    </header>

                    <!-- Article Info -->
                    <h3 class="h4 g-mb-10">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Your creative squad</a>
                    </h3>
                    <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode05" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v5 -->

      <!-- Product Blocks v6 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode06">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                    <!-- Article Image -->
                    <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Corata</h4>
                    <p>Finding your perfect product</p>
                    <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                    <!-- Article Image -->
                    <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Morbi</h4>
                    <p>Finding your perfect product</p>
                    <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                    <!-- Article Image -->
                    <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img8.png" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Proin</h4>
                    <p>Finding your perfect product</p>
                    <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                    <!-- Article Image -->
                    <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img4.png" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <h4 class="h5 g-color-black g-font-weight-600 g-10b-5">Aliquim</h4>
                    <p>Finding your perfect product</p>
                    <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode06" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v6 -->

      <!-- Product Blocks v7 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#07</span>
          </h2>
        </div>

        <div id="shortcode07">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="2.5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="3" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>
            </div>
          </div>
        </div>

        {% set contentTarget = "#shortcode07" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v7 -->

      <!-- Product Blocks v8 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover__additional--jump u-shadow-v19 g-bg-white rounded g-transition-0_3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <!-- Article Header -->
                      <h4 class="h5">Unify Care</h4>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3"></div>
                      <!-- End Article Header -->

                      <!-- Article Info -->
                      <div class="g-flex-middle g-pos-rel g-py-30">
                        <div class="g-flex-middle-item">
                          <p class="g-mb-0">We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
                        </div>
                        <div class="u-block-hover__additional--fade g-bg-white g-flex-middle">
                          <div class="g-flex-middle-item">
                            <p>Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Article Info -->

                      <hr class="g-brd-gray-light-v4 g-my-15">

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-13">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-up g-mr-5"></i>
                          21
                        </a>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-down g-mr-5"></i>
                          0
                        </a>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover__additional--jump u-shadow-v19 g-bg-white rounded g-transition-0_3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <!-- Article Header -->
                      <h4 class="h5">Unify Care</h4>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="5"></div>
                      <!-- End Article Header -->

                      <!-- Article Info -->
                      <div class="g-flex-middle g-pos-rel g-py-30">
                        <div class="g-flex-middle-item">
                          <p class="g-mb-0">We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
                        </div>
                        <div class="u-block-hover__additional--fade g-bg-white g-flex-middle">
                          <div class="g-flex-middle-item">
                            <p>Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Article Info -->

                      <hr class="g-brd-gray-light-v4 g-my-15">

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-13">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-up g-mr-5"></i>
                          25
                        </a>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-down g-mr-5"></i>
                          0
                        </a>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover__additional--jump u-shadow-v19 g-bg-white rounded g-transition-0_3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <!-- Article Header -->
                      <h4 class="h5">Unify Care</h4>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="5"></div>
                      <!-- End Article Header -->

                      <!-- Article Info -->
                      <div class="g-flex-middle g-pos-rel g-py-30">
                        <div class="g-flex-middle-item">
                          <p class="g-mb-0">We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
                        </div>
                        <div class="u-block-hover__additional--fade g-bg-white g-flex-middle">
                          <div class="g-flex-middle-item">
                            <p>Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Article Info -->

                      <hr class="g-brd-gray-light-v4 g-my-15">

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-13">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-up g-mr-5"></i>
                          33
                        </a>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-down g-mr-5"></i>
                          0
                        </a>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-3 col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover__additional--jump u-shadow-v19 g-bg-white rounded g-transition-0_3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <!-- Article Header -->
                      <h4 class="h5">Unify Care</h4>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="4"></div>
                      <!-- End Article Header -->

                      <!-- Article Info -->
                      <div class="g-flex-middle g-pos-rel g-py-30">
                        <div class="g-flex-middle-item">
                          <p class="g-mb-0">We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
                        </div>
                        <div class="u-block-hover__additional--fade g-bg-white g-flex-middle">
                          <div class="g-flex-middle-item">
                            <p>Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Article Info -->

                      <hr class="g-brd-gray-light-v4 g-my-15">

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-13">
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-up g-mr-5"></i>
                          24
                        </a>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">
                          <i class="fa fa-thumbs-o-down g-mr-5"></i>
                          2
                        </a>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode8" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v8 -->

      <!-- Product Blocks v9 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#09</span>
          </h2>
        </div>

        <div id="shortcode09">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 col-lg-3 g-pt-20 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-block-hover--uncroped text-center">
                  <!-- Article Image -->
                  <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2013</em>
                  <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                  <h3 class="h5">
                    <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Radio Music Society</a>
                  </h3>
                  <!-- End Article Info -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-pt-20 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-block-hover--uncroped text-center">
                  <!-- Article Image -->
                  <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2014</em>
                  <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                  <h3 class="h5">
                    <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Girls</a>
                  </h3>
                  <!-- End Article Info -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-pt-20 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-block-hover--uncroped text-center">
                  <!-- Article Image -->
                  <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img8.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2015</em>
                  <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                  <h3 class="h5">
                    <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Break Throuch The Silence</a>
                  </h3>
                  <!-- End Article Info -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-pt-20 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-block-hover--uncroped text-center">
                  <!-- Article Image -->
                  <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2013</em>
                  <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                  <h3 class="h5">
                    <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Radio Music Society</a>
                  </h3>
                  <!-- End Article Info -->
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>
        </div>

        {% set contentTarget = "#shortcode09" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v9 -->

      <!-- Product Blocks v10 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                    <!-- Article Header -->
                    <header class="g-pa-25">
                      <h3 class="h5 g-mb-5">
                        <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                      </h3>

                      <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                        $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                      </span>

                      <div class="g-font-size-12">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Footer -->
                    <footer class="d-table w-100">
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                        4
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                        2
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                        130 sqft
                      </div>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                    <!-- Article Header -->
                    <header class="g-pa-25">
                      <h3 class="h5 g-mb-5">
                        <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                      </h3>

                      <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                        $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                      </span>

                      <div class="g-font-size-12">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Footer -->
                    <footer class="d-table w-100">
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                        4
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                        2
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                        130 sqft
                      </div>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                    <!-- Article Header -->
                    <header class="g-pa-25">
                      <h3 class="h5 g-mb-5">
                        <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                      </h3>

                      <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                        $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                      </span>

                      <div class="g-font-size-12">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Footer -->
                    <footer class="d-table w-100">
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                        4
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                        2
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                        130 sqft
                      </div>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                    <!-- Article Header -->
                    <header class="g-pa-25">
                      <h3 class="h5 g-mb-5">
                        <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                      </h3>

                      <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                        $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                      </span>

                      <div class="g-font-size-12">
                        <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                        <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                      </div>
                    </header>
                    <!-- End Article Header -->

                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Footer -->
                    <footer class="d-table w-100">
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                        4
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                        2
                      </div>
                      <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                        <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                        130 sqft
                      </div>
                    </footer>
                    <!-- End Article Footer -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v10 -->

      <!-- Product Blocks v11 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v24">
                    <div class="g-pos-rel">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/480x700/img1.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Add to Cart -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-black g-font-weight-700 g-font-size-11 text-center text-uppercase g-rounded-50x g-top-15 g-left-15 g-px-2 g-py-10">New</span>
                        <div class="g-z-index-2 g-pos-abs g-top-15 g-right-15">
                          <a class="g-color-black g-color-primary--hover g-font-size-16 g-text-underline--none--hover rounded" href="#">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </div>
                        <div class="u-block-hover__additional--fade g-flex-middle g-pa-15">
                          <div class="g-flex-middle-item--bottom">
                            <a class="d-inline-block g-bg-primary-opacity-0_8 g-bg-primary--hover g-color-white g-font-size-default g-text-underline--none--hover rounded g-py-5 g-px-10" href="#">
                              <i class="g-mr-5 icon-finance-100 u-line-icon-pro"></i>
                              add to cart
                            </a>
                          </div>
                        </div>
                      </figcaption>
                      <!-- End Figure Add to Cart -->
                    </div>

                    <!-- Figure Content -->
                    <div class="g-px-15 g-py-20">
                      <header class="d-flex justify-content-between">
                        <h4 class="h5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">T-shirt</a>
                        </h4>
                        <div class="d-block text-right">
                          <span class="g-color-black g-font-size-16 g-line-height-1">$92.00</span>
                        </div>
                      </header>
                      <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12 g-mb-5">
                        <li>
                          <a class="g-color-gray-dark-v4 g-color-black--hover g-font-style-normal text-uppercase" href="#">Men</a>
                        </li>
                        <li>Suits - Blazers</li>
                      </ul>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    </div>
                    <!-- End Figure Content -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v24">
                    <div class="g-pos-rel">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/480x700/img2.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Add to Cart -->
                      <figcaption>
                        <div class="g-z-index-2 g-pos-abs g-top-15 g-right-15">
                          <a class="g-color-black g-color-primary--hover g-font-size-16 g-text-underline--none--hover rounded" href="#">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </div>
                        <div class="u-block-hover__additional--fade g-flex-middle g-pa-15">
                          <div class="g-flex-middle-item--bottom">
                            <a class="d-inline-block g-bg-primary-opacity-0_8 g-bg-primary--hover g-color-white g-font-size-default g-text-underline--none--hover rounded g-py-5 g-px-10" href="#">
                              <i class="g-mr-5 icon-finance-100 u-line-icon-pro"></i>
                              add to cart
                            </a>
                          </div>
                        </div>
                      </figcaption>
                      <!-- End Figure Add to Cart -->
                    </div>

                    <!-- Figure Content -->
                    <div class="g-px-15 g-py-20">
                      <header class="d-flex justify-content-between">
                        <h4 class="h5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Skater dress</a>
                        </h4>
                        <div class="d-block text-right">
                          <span class="g-color-black g-font-size-16 g-line-height-1">$55.00</span>
                          <s class="d-block g-color-red g-font-size-13 g-line-height-1">$65.00</s>
                        </div>
                      </header>
                      <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12 g-mb-5">
                        <li>
                          <a class="g-color-gray-dark-v4 g-color-black--hover g-font-style-normal text-uppercase" href="#">Women</a>
                        </li>
                        <li>Suits - Blazers</li>
                      </ul>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    </div>
                    <!-- End Figure Content -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v24">
                    <div class="g-pos-rel">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/480x700/img3.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Add to Cart -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-red g-font-weight-700 g-font-size-11 text-center text-uppercase g-rounded-50x g-top-15 g-left-15 g-px-2 g-py-10">Sold</span>
                        <div class="g-z-index-2 g-pos-abs g-top-15 g-right-15">
                          <a class="g-color-black g-color-primary--hover g-font-size-16 g-text-underline--none--hover rounded" href="#">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </div>
                        <div class="u-block-hover__additional--fade g-flex-middle g-pa-15">
                          <div class="g-flex-middle-item--bottom">
                            <a class="d-inline-block g-bg-primary-opacity-0_8 g-bg-primary--hover g-color-white g-font-size-default g-text-underline--none--hover rounded g-py-5 g-px-10" href="#">
                              <i class="g-mr-5 icon-finance-100 u-line-icon-pro"></i>
                              add to cart
                            </a>
                          </div>
                        </div>
                      </figcaption>
                      <!-- End Figure Add to Cart -->
                    </div>

                    <!-- Figure Content -->
                    <div class="g-px-15 g-py-20">
                      <header class="d-flex justify-content-between">
                        <h4 class="h5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Casual shirt</a>
                        </h4>
                        <div class="d-block text-right">
                          <span class="g-color-black g-font-size-16 g-line-height-1">$67.00</span>
                        </div>
                      </header>
                      <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12 g-mb-5">
                        <li>
                          <a class="g-color-gray-dark-v4 g-color-black--hover g-font-style-normal text-uppercase" href="#">Men</a>
                        </li>
                        <li>Suits - Blazers</li>
                      </ul>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    </div>
                    <!-- End Figure Content -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-sm-6 col-lg-3 g-mb-30">
                  <!-- Figure -->
                  <figure class="u-block-hover u-shadow-v24">
                    <div class="g-pos-rel">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/480x700/img4.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Add to Cart -->
                      <figcaption>
                        <div class="g-z-index-2 g-pos-abs g-top-15 g-right-15">
                          <a class="g-color-black g-color-primary--hover g-font-size-16 g-text-underline--none--hover rounded" href="#">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </div>
                        <div class="u-block-hover__additional--fade g-flex-middle g-pa-15">
                          <div class="g-flex-middle-item--bottom">
                            <a class="d-inline-block g-bg-primary-opacity-0_8 g-bg-primary--hover g-color-white g-font-size-default g-text-underline--none--hover rounded g-py-5 g-px-10" href="#">
                              <i class="g-mr-5 icon-finance-100 u-line-icon-pro"></i>
                              add to cart
                            </a>
                          </div>
                        </div>
                      </figcaption>
                      <!-- End Figure Add to Cart -->
                    </div>

                    <!-- Figure Content -->
                    <div class="g-px-15 g-py-20">
                      <header class="d-flex justify-content-between">
                        <h4 class="h5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Solid dress</a>
                        </h4>
                        <div class="d-block text-right">
                          <span class="g-color-black g-font-size-16 g-line-height-1">$44.00</span>
                          <s class="d-block g-color-red g-font-size-13 g-line-height-1">$47.00</s>
                        </div>
                      </header>
                      <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-12 g-mb-5">
                        <li>
                          <a class="g-color-gray-dark-v4 g-color-black--hover g-font-style-normal text-uppercase" href="#">Women</a>
                        </li>
                        <li>Suits - Blazers</li>
                      </ul>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    </div>
                    <!-- End Figure Content -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode11" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v11 -->

      <!-- Product Blocks v12 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img10.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Forbes 1000</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Google Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">10</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">425</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">66</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Icon -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Icon -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Business</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Apple Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">354</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">2</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">0</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Web Programming</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Microsoft Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">95</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">17</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">34</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->

              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img2.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Production</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Google Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">10</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">425</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">66</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Icon -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Icon -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Creative agency</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Apple Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">354</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">2</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">0</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 media g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <div class="d-flex rounded-circle g-mr-15">
                      <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <div class="media-body">
                      <!-- Article Info -->
                      <div class="g-mb-20">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Project planning</a>
                        </h3>
                        <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                        <p>We aim high at being focused on building relationships with our clients and community.</p>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Author -->
                      <ul class="list-inline g-color-gray-dark-v5 g-font-size-13">
                        <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                          <span>Microsoft Inc.</span>
                        </li>
                        <li class="list-inline-item">
                          <time datetime="2013-01-02">Jan 02, 2017</time>
                        </li>
                      </ul>
                      <!-- End Article Author -->

                      <hr class="g-brd-gray-light-v4 g-my-20">

                      <!-- Figure Footer -->
                      <ul class="list-inline g-mb-0">
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">95</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">17</span>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="d-inline-block g-brd-around g-brd-gray-light-v4 g-brd-primary--hover g-color-gray-dark-v5 g-font-size-12 g-text-underline--none--hover rounded g-px-10 g-py-5" href="#">
                            <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                            <span class="g-font-weight-600 g-ml-5">34</span>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v12 -->

      <!-- Product Blocks v13 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#13</span>
          </h2>
        </div>

        <div id="shortcode13">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="row">
              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article>
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <div class="g-mb-30">
                      <h3 class="h4 g-color-black g-font-weight-600 mb-3">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Finding your perfect plan</a>
                      </h3>
                      <p>We aim high at being focused on building relationships with our clients and community.</p>
                    </div>

                    <div class="d-flex justify-content-start">
                      <div class="align-self-center g-width-70 g-mr-15">
                        <!-- Chart Pie -->
                        <div class="js-pie g-color-black"
                             data-circles-value="16"
                             data-circles-max-value="100"
                             data-circles-bg-color="#dedede"
                             data-circles-fg-color="#72c02c"
                             data-circles-radius="35"
                             data-circles-stroke-width="4"
                             data-circles-font-size="14"
                             data-circles-font-weight="700"
                             data-circles-additional-text="%"
                             data-circles-duration="2000"
                             data-circles-scroll-animate="true"></div>
                        <!-- End Chart Pie -->
                      </div>
                      <div class="align-self-center g-font-size-13">
                        <span class="g-color-black g-font-weight-700">$ 258 750</span>
                        <em class="d-block g-font-style-normal">25 days left</em>
                      </div>
                      <div class="d-block align-self-center ml-auto">
                        <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">Donate</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article>
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <div class="g-mb-30">
                      <h3 class="h4 g-color-black g-font-weight-600 mb-3">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Creative digital agency</a>
                      </h3>
                      <p>We aim high at being focused on building relationships with our clients and community.</p>
                    </div>

                    <div class="d-flex justify-content-start">
                      <div class="align-self-center g-width-70 g-mr-15">
                        <!-- Chart Pie -->
                        <div class="js-pie g-color-black"
                             data-circles-value="26"
                             data-circles-max-value="100"
                             data-circles-bg-color="#dedede"
                             data-circles-fg-color="#72c02c"
                             data-circles-radius="35"
                             data-circles-stroke-width="4"
                             data-circles-font-size="14"
                             data-circles-font-weight="700"
                             data-circles-additional-text="%"
                             data-circles-duration="2000"
                             data-circles-scroll-animate="true"></div>
                        <!-- End Chart Pie -->
                      </div>
                      <div class="align-self-center g-font-size-13">
                        <span class="g-color-black g-font-weight-700">$ 258 750</span>
                        <em class="d-block g-font-style-normal">25 days left</em>
                      </div>
                      <div class="d-block align-self-center ml-auto">
                        <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">Donate</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article>
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-shadow-v24 g-pa-30">
                    <div class="g-mb-30">
                      <h3 class="h4 g-color-black g-font-weight-600 mb-3">
                        <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Your creative squad</a>
                      </h3>
                      <p>We aim high at being focused on building relationships with our clients and community.</p>
                    </div>

                    <div class="d-flex justify-content-start">
                      <div class="align-self-center g-width-70 g-mr-15">
                        <!-- Chart Pie -->
                        <div class="js-pie g-color-black"
                             data-circles-value="36"
                             data-circles-max-value="100"
                             data-circles-bg-color="#dedede"
                             data-circles-fg-color="#72c02c"
                             data-circles-radius="35"
                             data-circles-stroke-width="4"
                             data-circles-font-size="14"
                             data-circles-font-weight="700"
                             data-circles-additional-text="%"
                             data-circles-duration="2000"
                             data-circles-scroll-animate="true"></div>
                        <!-- End Chart Pie -->
                      </div>
                      <div class="align-self-center g-font-size-13">
                        <span class="g-color-black g-font-weight-700">$ 258 750</span>
                        <em class="d-block g-font-style-normal">25 days left</em>
                      </div>
                      <div class="d-block align-self-center ml-auto">
                        <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">Donate</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>
            <script type="text/plain" src="{{ root }}assets/vendor/circles/circles.min.js"></script>

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.chart-pie.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of chart pies
                $.HSCore.components.HSChartPie.init('.js-pie');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode13" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v13 -->

      <!-- Product Blocks v14 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-4 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-bottom-3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 mb-0">
                        In total we collected
                      </h3>
                      <span class="d-block g-color-black g-font-weight-700 g-font-size-30 mb-3">$8 789 576.00</span>
                      <p class="g-mb-35">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-py-12" href="#">
                        <i class="g-color-white g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-bottom-3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 mb-0">
                        In total we collected
                      </h3>
                      <span class="d-block g-color-black g-font-weight-700 g-font-size-30 mb-3">$12 459 982.00</span>
                      <p class="g-mb-35">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-py-12" href="#">
                        <i class="g-color-white g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-4 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v21 u-shadow-v21--hover g-bg-white g-rounded-bottom-3">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-pa-25">
                      <h3 class="h4 g-font-weight-300 mb-0">
                        In total we collected
                      </h3>
                      <span class="d-block g-color-black g-font-weight-700 g-font-size-30 mb-3">$3 345 999.00</span>
                      <p class="g-mb-35">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-py-12" href="#">
                        <i class="g-color-white g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v14 -->

      <!-- Product Blocks v15 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#15</span>
          </h2>
        </div>

        <div id="shortcode15">
          <div class="shortcode-html">
            <!-- Article -->
            <article class="row flex-md-row align-items-center text-center">
              <div class="col-lg-6 g-mb-50">
                <!-- Article Info -->
                <span class="d-block g-color-gray-dark-v5 g-font-weight-700 g-font-size-12 text-uppercase g-mb-20">by Htmlstream</span>
                <h3 class="h1 g-color-black g-font-weight-700 text-uppercase g-line-height-1_2 g-mb-35">Vivo Pencil</h3>
                <i class="d-block fa fa-circle g-mb-30"></i>
                <div class="g-px-70--md g-mb-20">
                  <p>Understanding who you are and what you want is our strategy for your health.</p>
                </div>
                <span class="d-block g-font-weight-700 g-font-size-26 g-mb-20">$14.00</span>
                <button type="button" class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase">Book Now</button>
                <!-- End Article Info -->
              </div>

              <div class="col-lg-6 g-mb-50">
                <!-- Article Image -->
                <img class="img-fluid w-100" src="{{ root }}assets/img-temp/525x300/img1.png" alt="Image Description">
                <!-- End Article Image -->
              </div>
            </article>
            <!-- End Article -->
          </div>
        </div>

        {% set contentTarget = "#shortcode15" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v15 -->

      <!-- Product Blocks v16 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#16</span>
            </h2>
          </div>

          <div id="shortcode16">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/350x230/img1.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-3 g-pa-30">
                      <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                      <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify template
                        </a>
                      </h3>
                      <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                      <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/350x230/img2.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-3 g-pa-30">
                      <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                      <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify template
                        </a>
                      </h3>
                      <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                      <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/350x230/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-3 g-pa-30">
                      <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                      <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify template
                        </a>
                      </h3>
                      <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                      <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/350x230/img4.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-3 g-pa-30">
                      <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                      <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify template
                        </a>
                      </h3>
                      <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                      <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode16" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v16 -->

      <!-- Product Blocks v17 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#17</span>
          </h2>
        </div>

        <div id="shortcode17">
          <div class="shortcode-html">
            <!-- Article -->
            <article class="row mx-0">
              <div class="col-md-6 g-bg-size-cover g-min-height-250" data-bg-img-src="{{ root }}assets/img-temp/740x380/img1.jpg"></div>

              <div class="col-md-6 g-bg-secondary g-pa-40">
                <!-- Article Header -->
                <header>
                  <h4 class="g-font-size-12 text-uppercase g-mb-20">
                    <i class="align-middle g-font-size-18 g-mr-7 icon-hotel-restaurant-235"></i>
                    Muffinski's, 5 King St, London WC2E 8HN
                  </h4>
                </header>
                <!-- End Article Header -->

                <!-- Article Title -->
                <h3 class="h3 g-mb-20">
                  <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">More than a look, design is functional.</a>
                </h3>
                <!-- End Article Title -->

                <p class="g-mb-25">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>

                <!-- Article Icons -->
                <div class="g-overflow-hidden g-mb-15">
                  <ul class="list-inline g-brd-top g-brd-bottom g-brd-gray-light-v3 g-font-size-12 text-center g-mx-minus-25">
                    <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                      <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-022 g-mr-5"></i>
                      4
                    </li>
                    <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                      <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-158 g-mr-5"></i>
                      2
                    </li>
                    <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                      <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-real-estate-017 g-mr-5"></i>
                      130 sqft
                    </li>
                  </ul>
                </div>
                <!-- End Article Icons -->

                <!-- Article Footer -->
                <footer class="d-flex justify-content-between">
                  <div class="align-self-center g-mb-20 g-mb-0--lg">
                    <div class="g-font-weight-700 g-font-size-16">
                      <s class="g-mr-15">$1.750.000</s>
                      <span class="g-color-primary">$1.500.000</span>
                    </div>
                  </div>
                  <div class="align-self-center">
                    <a class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-default text-uppercase" href="#">Learn More</a>
                  </div>
                </footer>
                <!-- End Article Footer -->
              </div>
            </article>
            <!-- End Article -->
          </div>
        </div>

        {% set contentTarget = "#shortcode17" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v17 -->

      <!-- Product Blocks v18 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#18</span>
            </h2>
          </div>

          <div id="shortcode18">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100 d-block g-rounded-top-5" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <div class="u-ribbon-v1 u-ribbon--left u-ribbon g-bg-primary g-color-white g-font-weight-700 g-font-size-11 text-uppercase rounded g-top-20 g-left-20">For Rent</div>

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-5 g-pa-30">
                      <!-- Article Header -->
                      <header>
                        <h4 class="g-font-size-12 text-uppercase g-mb-15">
                          <i class="align-middle g-font-size-18 g-mr-7 icon-hotel-restaurant-235"></i>
                          Muffinski's, 5 King St, London WC2E 8HN
                        </h4>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Title -->
                      <h3 class="h5 g-mb-20">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">More than a look, design is functional</a>
                      </h3>
                      <!-- End Article Title -->

                      <p class="g-mb-25">This is where we sit down, grab a cup of coffee and dial in the details. </p>

                      <!-- Article Icons -->
                      <div class="g-overflow-hidden g-mb-15">
                        <ul class="list-inline g-brd-top g-brd-bottom g-brd-gray-light-v3 g-font-size-12 text-center g-mx-minus-25">
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-022 g-mr-5"></i>
                            4
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-158 g-mr-5"></i>
                            2
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-real-estate-017 g-mr-5"></i>
                            130 sqft
                          </li>
                        </ul>
                      </div>
                      <!-- End Article Icons -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between align-items-center w-100 text-uppercase">
                        <div class="align-middle">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-font-size-10" href="#">12 Reviews</a>
                        </div>
                        <div class="align-middle g-color-gray-dark-v2 g-font-size-18 g-font-weight-600 text-right g-letter-spacing-1">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100 d-block g-rounded-top-5" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <div class="u-ribbon-v1 u-ribbon--left u-ribbon g-bg-red g-color-white g-font-weight-700 g-font-size-11 text-uppercase rounded g-top-20 g-left-20">For Sale</div>

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-5 g-pa-30">
                      <!-- Article Header -->
                      <header>
                        <h4 class="g-font-size-12 text-uppercase g-mb-15">
                          <i class="align-middle g-font-size-18 g-mr-7 icon-hotel-restaurant-235"></i>
                          Muffinski's, 5 King St, London WC2E 8HN
                        </h4>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Title -->
                      <h3 class="h5 g-mb-20">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">More than a look, design is functional</a>
                      </h3>
                      <!-- End Article Title -->

                      <p class="g-mb-25">This is where we sit down, grab a cup of coffee and dial in the details. </p>

                      <!-- Article Icons -->
                      <div class="g-overflow-hidden g-mb-15">
                        <ul class="list-inline g-brd-top g-brd-bottom g-brd-gray-light-v3 g-font-size-12 text-center g-mx-minus-25">
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-022 g-mr-5"></i>
                            4
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-158 g-mr-5"></i>
                            2
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-real-estate-017 g-mr-5"></i>
                            130 sqft
                          </li>
                        </ul>
                      </div>
                      <!-- End Article Icons -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between align-items-center w-100 text-uppercase">
                        <div class="align-middle">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-font-size-10" href="#">12 Reviews</a>
                        </div>
                        <div class="align-middle g-color-gray-dark-v2 g-font-size-18 g-font-weight-600 text-right g-letter-spacing-1">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="u-shadow-v19 g-bg-white g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100 d-block g-rounded-top-5" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <div class="u-ribbon-v1 u-ribbon--left u-ribbon g-bg-primary g-color-white g-font-weight-700 g-font-size-11 text-uppercase rounded g-top-20 g-left-20">For Rent</div>

                    <!-- Article Content -->
                    <div class="g-rounded-bottom-5 g-pa-30">
                      <!-- Article Header -->
                      <header>
                        <h4 class="g-font-size-12 text-uppercase g-mb-15">
                          <i class="align-middle g-font-size-18 g-mr-7 icon-hotel-restaurant-235"></i>
                          Muffinski's, 5 King St, London WC2E 8HN
                        </h4>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Title -->
                      <h3 class="h5 g-mb-20">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">More than a look, design is functional</a>
                      </h3>
                      <!-- End Article Title -->

                      <p class="g-mb-25">This is where we sit down, grab a cup of coffee and dial in the details. </p>

                      <!-- Article Icons -->
                      <div class="g-overflow-hidden g-mb-15">
                        <ul class="list-inline g-brd-top g-brd-bottom g-brd-gray-light-v3 g-font-size-12 text-center g-mx-minus-25">
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-022 g-mr-5"></i>
                            4
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-hotel-restaurant-158 g-mr-5"></i>
                            2
                          </li>
                          <li class="list-inline-item g-width-30x g-brd-left g-brd-gray-light-v3 g-pa-12-5-7 mx-0 g-my-5">
                            <i class="align-middle u-line-icon-pro g-color-gray-dark-v4 g-font-size-18 icon-real-estate-017 g-mr-5"></i>
                            130 sqft
                          </li>
                        </ul>
                      </div>
                      <!-- End Article Icons -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between align-items-center w-100 text-uppercase">
                        <div class="align-middle">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-11 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-font-size-10" href="#">12 Reviews</a>
                        </div>
                        <div class="align-middle g-color-gray-dark-v2 g-font-size-18 g-font-weight-600 text-right g-letter-spacing-1">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode18" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v18 -->

      <!-- Product Blocks v19 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#19</span>
          </h2>
        </div>

        <div id="shortcode19">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="g-color-gray-dark-v4">
                  <!-- Article Image -->
                  <a class="d-block" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <div class="g-pa-20">
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article -->
                </article>
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article>
                  <!-- Article Image -->
                  <a class="d-block" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img5.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <div class="g-pa-20">
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <div class="d-block">
                        <span class="g-color-black g-font-size-16">$60.00</span>
                        <s class="d-block g-color-red g-font-size-13">$95.00</s>
                      </div>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                  </div>
                  <!-- End Article Info -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="g-color-gray-dark-v4">
                  <!-- Article Image -->
                  <a class="d-block" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <div class="g-pa-20">
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article -->
                </article>
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Article -->
                <article class="g-color-gray-dark-v4">
                  <!-- Article Image -->
                  <a class="d-block" href="#">
                    <img class="w-100" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
                  </a>
                  <!-- End Article Image -->

                  <!-- Article Info -->
                  <div class="g-pa-20">
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </div>
                  <!-- End Article -->
                </article>
              </div>
            </div>
          </div>
        </div>

        {% set contentTarget = "#shortcode19" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v19 -->

      <!-- Product Blocks v20 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#20</span>
            </h2>
          </div>

          <div id="shortcode20">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img9.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->

              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img10.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->

              <!-- Products Block -->
              <div class="row">
                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 g-mb-30">
                  <!-- Article -->
                  <article class="d-flex justify-content-between align-items-center u-shadow-v19 g-bg-white rounded g-pa-20">
                    <!-- Article Image -->
                    <a class="d-block g-max-width-100 g-mr-20" href="#">
                      <img class="w-100 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="g-mr-20">
                      <h3 class="g-color-black g-font-weight-700 g-font-size-13 text-uppercase">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Unify Template
                        </a>
                      </h3>
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <div class="d-block">
                      <strong class="d-block ml-auto g-color-white g-bg-primary g-font-weight-700 g-font-size-13 rounded g-py-4 g-px-12">$25</strong>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
              <!-- End Products Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode20" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v20 -->

      <!-- Product Blocks v21 -->
      <div class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#21</span>
          </h2>
        </div>

        <div id="shortcode21">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-sm-4">
                <!-- Article -->
                <article class="h-100 text-center g-bg-white g-brd-around g-brd-gray-light-v4">
                  <!-- Article Image -->
                  <img class="d-block info-v5-2__image g-ml-minus-1" src="{{ root }}assets/img-temp/500x320/img1.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="text-center g-pa-20">
                    <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                    <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-15">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Unify Template</a>
                    </h3>
                    <p class="g-mb-15">Understanding what you want is our strategy for your health.</p>
                    <span class="g-color-primary g-font-weight-700 g-font-size-16">$25</span>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-sm-4">
                <!-- Article -->
                <article class="h-100 text-center g-bg-white g-brd-around g-brd-gray-light-v4">
                  <!-- Article Image -->
                  <img class="d-block info-v5-2__image g-ml-minus-1" src="{{ root }}assets/img-temp/500x320/img2.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="text-center g-pa-20">
                    <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                    <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-15">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Unify Template</a>
                    </h3>
                    <p class="g-mb-15">Understanding what you want is our strategy for your health.</p>
                    <span class="g-color-primary g-font-weight-700 g-font-size-16">$25</span>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>

              <div class="col-sm-4">
                <!-- Article -->
                <article class="h-100 text-center g-bg-white g-brd-around g-brd-gray-light-v4">
                  <!-- Article Image -->
                  <img class="d-block info-v5-2__image g-ml-minus-1" src="{{ root }}assets/img-temp/500x320/img3.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="text-center g-pa-20">
                    <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                    <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-15">
                      <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">Unify Template</a>
                    </h3>
                    <p class="g-mb-15">Understanding what you want is our strategy for your health.</p>
                    <span class="g-color-primary g-font-weight-700 g-font-size-16">$25</span>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        {% set contentTarget = "#shortcode21" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </div>
      <!-- End Product Blocks v21 -->

      <!-- Product Blocks v22 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#22</span>
            </h2>
          </div>

          <div id="shortcode22">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="info-v5-3 g-parent g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x600/img1.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Photography</a>

                    <!-- Article Content -->
                    <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                      <!-- Article Header -->
                      <header class="g-pos-rel g-color-white g-mb-40">
                        <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                          From
                          <span class="g-font-weight-700">$150</span>
                          <span class="g-font-size-12">Per Course</span>
                        </span>
                        <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                          <a class="g-color-white g-color-white--hover" href="#">Photography For Travelers</a>
                        </h3>
                      </header>
                      <!-- End Article Header -->

                      <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                      <!-- Article Info -->
                      <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                          Duration: 6 months
                        </li>
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                          Degree level: Advanced
                        </li>
                      </ul>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="info-v5-3 g-parent g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x600/img2.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Dance</a>

                    <!-- Article Content -->
                    <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                      <!-- Article Header -->
                      <header class="g-pos-rel g-color-white g-mb-40">
                        <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                          From
                          <span class="g-font-weight-700">$135</span>
                          <span class="g-font-size-12">Per Course</span>
                        </span>
                        <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                          <a class="g-color-white g-color-white--hover" href="#">Ballet Lessons</a>
                        </h3>
                      </header>
                      <!-- End Article Header -->

                      <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                      <!-- Article Info -->
                      <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                          Duration: 4 months
                        </li>
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                          Degree level: Intermediate
                        </li>
                      </ul>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Article -->
                  <article class="info-v5-3 g-parent g-pos-rel">
                    <!-- Article Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/500x600/img3.jpg" alt="Image Description">
                    <!-- End Article Image -->

                    <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Art</a>

                    <!-- Article Content -->
                    <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                      <!-- Article Header -->
                      <header class="g-pos-rel g-color-white g-mb-40">
                        <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                          From
                          <span class="g-font-weight-700">$200</span>
                          <span class="g-font-size-12">Per Course</span>
                        </span>
                        <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                          <a class="g-color-white g-color-white--hover" href="#">Quality Street Art</a>
                        </h3>
                      </header>
                      <!-- End Article Header -->

                      <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                      <!-- Article Info -->
                      <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                          Duration: 6 months
                        </li>
                        <li class="g-mb-20">
                          <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                          Degree level: Advanced
                        </li>
                      </ul>
                      <!-- End Article Info -->
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode22" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v22 -->

      <!-- Product Blocks v23 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#23</span>
          </h2>
        </div>

        <div id="shortcode23">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="row justify-content-center">
              <div class="col-lg-9">
                <!-- Article -->
                <article class="u-shadow-v11 rounded g-pa-20 g-mb-30">
                  <div class="row align-items-center">
                    <!-- Article Image -->
                    <a class="col-sm-4" href="#">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/425x250/img8.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Content -->
                    <div class="col-sm-8 g-brd-left--sm g-brd-gray-light-v4">
                      <div class="g-pa-10">
                        <header class="d-flex justify-content-start g-mb-3">
                          <h4 class="h5 d-inline-block text-uppercase g-mr-10">
                            <a class="g-color-black" href="#">Chair</a>
                          </h4>
                          <a class="g-color-gray-dark-v5 g-font-style-normal text-uppercase" href="#">Furniture</a>
                          <div class="js-rating ml-auto d-inline-block g-color-primary g-font-size-13" data-rating="3" data-spacing="2" data-backward-icons-classes="fa fa-star-o g-opacity-0_5"></div>
                        </header>

                        <span class="d-block g-color-gray-dark-v4 g-font-size-18 g-mb-10">
                          $60.00 <s class="d-inline-block g-color-red g-font-size-15 g-ml-10">$95.00</s>
                        </span>

                        <p class="g-mb-20">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>

                        <ul class="list-inline g-mx-minus-20 mb-20 g-pl-7">
                          <li class="list-inline-item info-v5-4__action g-brd-right g-brd-gray-light-v3 g-color-gray-dark-v5 g-pr-20 g-pl-15">
                            <i class="align-middle g-font-size-16 g-transition-0_3 g-mr-7 icon-medical-022 u-line-icon-pro"></i>
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">Add to Wishlist</a>
                          </li>
                          <li class="list-inline-item info-v5-4__action g-color-gray-dark-v5 g-pr-20 g-pl-15">
                            <i class="align-middle g-font-size-16 g-transition-0_3 g-mr-7 icon-communication-159 u-line-icon-pro"></i>
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">Add to Compare</a>
                          </li>
                        </ul>

                        <button type="button" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase g-mx-5 g-mt-10">Add to Cart</button>
                      </div>
                    </div>
                    <!-- End Article Content -->
                  </div>
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>

          <div class="shortcode-scripts">
            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode23" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v23 -->

      <!-- Product Blocks v24 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#24</span>
            </h2>
          </div>

          <div id="shortcode24">
            <div class="shortcode-html">
              <div class="row g-mx-minus-10 g-mb-50">
                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img1.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Glasses</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Accessories</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$22.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img2.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Gloves</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Accessories</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img3.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Chukka Shoes</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img4.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Shoes</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Content -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img5.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Sneaker</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Content -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img6.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Sneaker</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Footwear</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img7.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Desk Clock</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img8.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Alarm Clock</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>

                <div class="col-md-6 col-lg-4 g-px-10">
                  <!-- Article -->
                  <article class="media g-brd-around g-brd-gray-light-v4 g-bg-white rounded g-pa-10 g-mb-20">
                    <!-- Article Image -->
                    <div class="g-max-width-100 g-mr-15">
                      <img class="d-flex w-100" src="{{ root }}assets/img-temp/150x150/img9.jpg" alt="Image Description">
                    </div>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <div class="media-body align-self-center">
                      <h4 class="h5 g-mb-7">
                        <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Desk Clock</a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13 g-mb-10" href="#">Hi-Tech</a>
                      <!-- End Article Info -->

                      <!-- Article Footer -->
                      <footer class="d-flex justify-content-between g-font-size-16">
                        <span class="g-color-black g-line-height-1">$55.00</span>
                        <ul class="list-inline g-color-gray-light-v2 g-font-size-14 g-line-height-1">
                          <li class="list-inline-item align-middle g-brd-right g-brd-gray-light-v3 g-pr-10 g-mr-6">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                              <i class="icon-finance-100 u-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-middle">
                            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                              <i class="icon-medical-022 u-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                      </footer>
                      <!-- End Article Footer -->
                    </div>
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode24" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v24 -->

      <!-- Product Blocks v25 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#25</span>
          </h2>
        </div>

        <div id="shortcode25">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Product -->
                <figure class="g-px-10">
                  <div class="g-pos-rel g-mb-20">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img1.jpg" alt="Image Description">

                    <!-- Ribbon -->
                    <figcaption>
                      <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-primary g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">New</span>
                    </figcaption>
                    <!-- End Ribbon -->
                  </div>

                  <div class="media">
                    <!-- Product Info -->
                    <div class="d-flex flex-column">
                      <h4 class="h6 g-color-black mb-1">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Summer shorts
                        </a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                      <span class="d-block g-color-black g-font-size-17">$52.00</span>
                    </div>
                    <!-- End Product Info -->

                    <!-- Products Icons -->
                    <ul class="list-inline media-body text-right">
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Products Icons -->
                  </div>
                </figure>
                <!-- End Product -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Product -->
                <figure class="g-px-10">
                  <div class="g-pos-rel g-mb-20">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img2.jpg" alt="Image Description">
                  </div>

                  <div class="media">
                    <!-- Product Info -->
                    <div class="d-flex flex-column">
                      <h4 class="h6 g-color-black mb-1">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Stylish shirt
                        </a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                      <s class="d-block g-color-lightred g-font-weight-500 g-font-size-13">$101.00</s>
                      <span class="d-block g-color-black g-font-size-17">$99.00</span>
                    </div>
                    <!-- End Product Info -->

                    <!-- Products Icons -->
                    <ul class="list-inline media-body text-right">
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Products Icons -->
                  </div>
                </figure>
                <!-- End Product -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Product -->
                <figure class="g-px-10">
                  <div class="g-pos-rel g-mb-20">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img3.jpg" alt="Image Description">

                    <!-- Ribbon -->
                    <figcaption>
                      <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-lightred g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">Sold</span>
                    </figcaption>
                    <!-- End Ribbon -->
                  </div>

                  <div class="media">
                    <!-- Product Info -->
                    <div class="d-flex flex-column">
                      <h4 class="h6 g-color-black mb-1">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Classic jacket
                        </a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                      <span class="d-block g-color-black g-font-size-17">$49.99</span>
                    </div>
                    <!-- End Product Info -->

                    <!-- Products Icons -->
                    <ul class="list-inline media-body text-right">
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Products Icons -->
                  </div>
                </figure>
                <!-- End Product -->
              </div>

              <div class="col-md-6 col-lg-3 g-mb-30">
                <!-- Product -->
                <figure class="g-px-10">
                  <div class="g-pos-rel g-mb-20">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img4.jpg" alt="Image Description">
                  </div>

                  <div class="media">
                    <!-- Product Info -->
                    <div class="d-flex flex-column">
                      <h4 class="h6 g-color-black mb-1">
                        <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                          Wool lined parka
                        </a>
                      </h4>
                      <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                      <span class="d-block g-color-black g-font-size-17">$82.37</span>
                    </div>
                    <!-- End Product Info -->

                    <!-- Products Icons -->
                    <ul class="list-inline media-body text-right">
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Products Icons -->
                  </div>
                </figure>
                <!-- End Product -->
              </div>
            </div>
          </div>
        </div>

        {% set contentTarget = "#shortcode25" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v25 -->

      <!-- Product Blocks v26 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#26</span>
            </h2>
          </div>

          <div id="shortcode26">
            <div class="shortcode-html">
              <div class="row g-mx-minus-10">
                <div class="col-sm-6 col-lg-3 g-px-10 g-mb-30">
                  <div class="u-shadow-v21">
                    <div class="g-pos-rel">
                      <!-- Product Image -->
                      <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                           data-infinite="true"
                           data-fade="true"
                           data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-30 g-height-30 g-color-white g-color-primary--hover g-font-size-18 g-mb-45"
                           data-arrow-left-classes="fa fa-angle-left g-left-5"
                           data-arrow-right-classes="fa fa-angle-right g-right-5">
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img1.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img2.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img3.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Product Image -->

                      <!-- Product Info -->
                      <div class="text-center g-pos-abs g-bottom-20 g-left-0 g-right-0">
                        <!-- Checkbox -->
                        <ul class="list-inline g-ml-minus-10 mb-1">
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-bluegray rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-white rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-brown rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                        </ul>
                        <!-- End Checkbox -->

                        <h2 class="g-color-white-opacity-0_8 g-font-weight-400 g-font-size-13">
                          <a class="u-link-v5 g-color-white-opacity-0_8 g-color-primary--hover g-cursor-pointer" href="#">Unstructured Jacket</a>
                        </h2>
                        <span class="g-color-white g-font-weight-600 g-font-size-20">$159.99</span>
                      </div>
                      <!-- End Product Info -->
                    </div>

                    <!-- Product Size -->
                    <div class="g-bg-white g-pa-20">
                      <h4 class="g-font-size-11 text-center text-uppercase">Choose Size</h4>

                      <div class="d-flex justify-content-between align-items-center">
                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>

                        <div class="col-7">
                          <!-- Checkbox -->
                          <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                               data-infinite="true"
                               data-slides-show="3"
                               data-autoplay="true">
                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XXL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  S
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  M
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  L
                                </div>
                              </label>
                            </div>
                          </div>
                          <!-- End Checkbox -->
                        </div>

                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </div>
                    </div>
                    <!-- End Product Size -->
                  </div>
                </div>

                <div class="col-sm-6 col-lg-3 g-px-10 g-mb-30">
                  <div class="u-shadow-v21">
                    <div class="g-pos-rel">
                      <!-- Product Image -->
                      <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                           data-infinite="true"
                           data-fade="true"
                           data-autoplay="true">
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img4.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img5.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img6.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Product Image -->

                      <!-- Product Info -->
                      <div class="text-center g-pos-abs g-bottom-20 g-left-0 g-right-0">
                        <!-- Checkbox -->
                        <ul class="list-inline g-ml-minus-10 mb-1">
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-bluegray rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-white rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-black rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                        </ul>
                        <!-- End Checkbox -->

                        <h2 class="g-color-white-opacity-0_8 g-font-weight-400 g-font-size-13">
                          <a class="u-link-v5 g-color-white-opacity-0_8 g-color-primary--hover g-cursor-pointer" href="#">Exclusive Coat by Milano</a>
                        </h2>
                        <span class="g-color-white g-font-weight-600 g-font-size-20">$676.00</span>
                      </div>
                      <!-- End Product Info -->
                    </div>

                    <!-- Product Size -->
                    <div class="g-bg-white g-pa-20">
                      <h4 class="g-font-size-11 text-center text-uppercase">Choose Size</h4>

                      <div class="d-flex justify-content-between align-items-center">
                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>

                        <div class="col-7">
                          <!-- Checkbox -->
                          <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                               data-infinite="true"
                               data-slides-show="3"
                               data-autoplay="true">
                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  S
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  M
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  L
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XXL
                                </div>
                              </label>
                            </div>
                          </div>
                          <!-- End Checkbox -->
                        </div>

                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </div>
                    </div>
                    <!-- End Product Size -->
                  </div>
                </div>

                <div class="col-sm-6 col-lg-3 g-px-10 g-mb-30">
                  <div class="u-shadow-v21">
                    <div class="g-pos-rel">
                      <!-- Product Image -->
                      <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                           data-infinite="true"
                           data-fade="true"
                           data-autoplay="true">
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img7.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img8.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Product Image -->

                      <!-- Product Info -->
                      <div class="text-center g-pos-abs g-bottom-20 g-left-0 g-right-0">
                        <!-- Checkbox -->
                        <ul class="list-inline g-ml-minus-10 mb-1">
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-white rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-beige rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-blue rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                        </ul>
                        <!-- End Checkbox -->

                        <h2 class="g-color-white-opacity-0_8 g-font-weight-400 g-font-size-13">
                          <a class="u-link-v5 g-color-white-opacity-0_8 g-color-primary--hover g-cursor-pointer" href="#">T-Shirt by Gucci</a>
                        </h2>
                        <span class="g-color-white g-font-weight-600 g-font-size-20">$121.00</span>
                      </div>
                      <!-- End Product Info -->
                    </div>

                    <!-- Product Size -->
                    <div class="g-bg-white g-pa-20">
                      <h4 class="g-font-size-11 text-center text-uppercase">Choose Size</h4>

                      <div class="d-flex justify-content-between align-items-center">
                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>

                        <div class="col-7">
                          <!-- Checkbox -->
                          <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                               data-infinite="true"
                               data-slides-show="3"
                               data-autoplay="true">
                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  S
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XXL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  L
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  M
                                </div>
                              </label>
                            </div>
                          </div>
                          <!-- End Checkbox -->
                        </div>

                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </div>
                    </div>
                    <!-- End Product Size -->
                  </div>
                </div>

                <div class="col-sm-6 col-lg-3 g-px-10 g-mb-30">
                  <div class="u-shadow-v21">
                    <div class="g-pos-rel">
                      <!-- Product Image -->
                      <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                           data-infinite="true"
                           data-fade="true"
                           data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-30 g-height-30 g-color-white g-color-primary--hover g-font-size-18 g-mb-45"
                           data-arrow-left-classes="fa fa-angle-left g-left-5"
                           data-arrow-right-classes="fa fa-angle-right g-right-5">
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img9.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/650x900/img10.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Product Image -->

                      <!-- Product Info -->
                      <div class="text-center g-pos-abs g-bottom-20 g-left-0 g-right-0">
                        <!-- Checkbox -->
                        <ul class="list-inline g-ml-minus-10 mb-1">
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-brown rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                          <li class="list-inline-item g-mx-10">
                            <label class="form-check-inline u-check">
                              <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                              <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-white--checked rounded-circle g-absolute-centered--y g-left-0">
                                <i class="d-block g-absolute-centered g-width-10 g-height-10 g-bg-beige rounded-circle"></i>
                              </div>
                            </label>
                          </li>
                        </ul>
                        <!-- End Checkbox -->

                        <h2 class="g-color-white-opacity-0_8 g-font-weight-400 g-font-size-13">
                          <a class="u-link-v5 g-color-white-opacity-0_8 g-color-primary--hover g-cursor-pointer" href="#">Scarf by Alvara</a>
                        </h2>
                        <span class="g-color-white g-font-weight-600 g-font-size-20">$87.99</span>
                      </div>
                      <!-- End Product Info -->
                    </div>

                    <!-- Product Size -->
                    <div class="g-bg-white g-pa-20">
                      <h4 class="g-font-size-11 text-center text-uppercase">Choose Size</h4>

                      <div class="d-flex justify-content-between align-items-center">
                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                          <i class="icon-medical-022 u-line-icon-pro"></i>
                        </a>

                        <div class="col-7">
                          <!-- Checkbox -->
                          <div class="js-carousel text-center g-rounded-50 g-bg-gray-light-v5 g-py-3"
                               data-infinite="true"
                               data-slides-show="3"
                               data-autoplay="true">
                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  XXL
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  S
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  M
                                </div>
                              </label>
                            </div>

                            <div class="js-slide mx-auto">
                              <label class="form-check-inline u-check g-pl-17">
                                <input class="g-hidden-xs-up" name="radInline3_1" type="radio">
                                <div class="u-check-icon-checkbox-v4 g-brd-none g-color-primary--hover g-font-size-10 g-absolute-centered--y g-left-0 mt-1">
                                  L
                                </div>
                              </label>
                            </div>
                          </div>
                          <!-- End Checkbox -->
                        </div>

                        <a class="col-2 u-icon-v1 u-icon-size--sm g-color-gray-dark-v3 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                          <i class="icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </div>
                    </div>
                    <!-- End Product Size -->
                  </div>
                </div>
              </div>
            </div>

            <div class="shortcode-styles">
              <!-- CSS Implementing Plugins -->
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
            </div>

            <div class="shortcode-scripts">
              <!-- JS Implementing Plugins -->
              <script type="text/plain" src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode26" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v26 -->

      <!-- Product Blocks v27 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#27</span>
          </h2>
        </div>

        <div id="shortcode27">
          <div class="shortcode-html">
            <!-- Products -->
            <div class="row g-mb-40">
              <div class="col-sm-6 col-lg-4 g-mb-30">
                <!-- Products -->
                <article>
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x450/img9.jpg" alt="Image Description">

                  <div class="g-brd-x g-brd-gray-light-v3 g-bg-white">
                    <!-- Products - Deadline -->
                    <div class="g-brd-bottom g-brd-gray-light-v3 g-bg-secondary g-px-25 g-py-20">
                      <span class="d-block g-font-weight-500 g-font-size-13">Deadline: March 2018</span>
                    </div>
                    <!-- End Products - Deadline -->

                    <!-- Products - Address -->
                    <div class="g-pa-25">
                      <h3 class="g-font-weight-600 g-font-size-16">&#171;Mega Complex&#187;</h3>
                      <p class="g-font-size-13 mb-4">Milan, Italy</p>

                      <!-- Products - List of Details -->
                      <ul class="list-unstyled">
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">1 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 900 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $1,500</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">2 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 1,700 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $2,250</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">3 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 3,000 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $5,000</span>
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->
                    </div>
                    <!-- End Products - Address -->

                    <!-- Products - List of Details -->
                    <ul class="d-flex list-inline g-brd-y g-brd-gray-light-v3 mb-0">
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-real-estate-004 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-brd-x g-brd-gray-light-v3 g-py-13 mr-0">
                        <i class="icon-real-estate-064 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-color-gray-light-v3 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-furniture-017 u-line-icon-pro"></i>
                      </li>
                    </ul>
                    <!-- End Products - List of Details -->
                  </div>
                  <a class="btn btn-block g-brd-top-none g-brd-gray-light-v3 g-brd-primary--hover g-color-white--hover g-bg-secondary g-bg-primary--hover g-font-weight-600 rounded-0 g-px-18 g-py-15" href="page-single-item-1.html">
                    See Details
                    <i class="align-middle ml-2 fa fa-angle-right"></i>
                  </a>
                </article>
                <!-- End Products -->
              </div>

              <div class="col-sm-6 col-lg-4 g-mb-30">
                <!-- Products -->
                <article>
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x450/img10.jpg" alt="Image Description">

                  <div class="g-brd-x g-brd-gray-light-v3 g-bg-white">
                    <!-- Products - Deadline -->
                    <div class="g-brd-bottom g-brd-gray-light-v3 g-bg-secondary g-px-25 g-py-20">
                      <span class="d-flex align-items-center g-font-weight-500 g-font-size-13">
                        <span class="u-icon-v3 g-width-20 g-height-20 g-color-white g-bg-primary g-font-size-11 rounded-circle mr-2">
                          <i class="fa fa-check"></i>
                        </span>
                        Available
                      </span>
                    </div>
                    <!-- End Products - Deadline -->

                    <!-- Products - Address -->
                    <div class="g-pa-25">
                      <h3 class="g-font-weight-600 g-font-size-16">&#171;Lazura Royal&#187;</h3>
                      <p class="g-font-size-13 mb-4">London, England</p>

                      <!-- Products - List of Details -->
                      <ul class="list-unstyled">
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">1 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 900 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $900</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">2 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 1,700 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $1,100</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">3 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 3,000 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $3,299</span>
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->
                    </div>
                    <!-- End Products - Address -->

                    <!-- Products - List of Details -->
                    <ul class="d-flex list-inline g-brd-y g-brd-gray-light-v3 mb-0">
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-real-estate-004 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-color-gray-light-v3 g-font-size-20 text-center g-px-0 g-brd-x g-brd-gray-light-v3 g-py-13 mr-0">
                        <i class="icon-real-estate-064 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-color-gray-light-v3 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-furniture-017 u-line-icon-pro"></i>
                      </li>
                    </ul>
                    <!-- End Products - List of Details -->
                  </div>
                  <a class="btn btn-block g-brd-top-none g-brd-gray-light-v3 g-brd-primary--hover g-color-white--hover g-bg-secondary g-bg-primary--hover g-font-weight-600 rounded-0 g-px-18 g-py-15" href="page-single-item-1.html">
                    See Details
                    <i class="align-middle ml-2 fa fa-angle-right"></i>
                  </a>
                </article>
                <!-- End Products -->
              </div>

              <div class="col-sm-6 col-lg-4 g-mb-30">
                <!-- Products -->
                <article>
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x450/img11.jpg" alt="Image Description">

                  <div class="g-brd-x g-brd-gray-light-v3 g-bg-white">
                    <!-- Products - Deadline -->
                    <div class="g-brd-bottom g-brd-gray-light-v3 g-bg-secondary g-px-25 g-py-20">
                      <span class="d-block g-font-weight-500 g-font-size-13">Deadline: December 2019</span>
                    </div>
                    <!-- End Products - Deadline -->

                    <!-- Products - Address -->
                    <div class="g-pa-25">
                      <h3 class="g-font-weight-600 g-font-size-16">&#171;Kremel City&#187;</h3>
                      <p class="g-font-size-13 mb-4">London, England</p>

                      <!-- Products - List of Details -->
                      <ul class="list-unstyled">
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">1 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 900 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $5,550</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">2 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 1,700 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $7,950</span>
                        </li>
                        <li class="g-brd-bottom--dashed g-brd-gray-light-v3 pt-1 mb-3">
                          <span class="g-font-weight-500 g-font-size-12">3 rm. <span class="g-color-gray-dark-v5 g-font-size-10">from</span> 3,000 SQFT:</span>
                          <span class="float-right g-color-black"><span class="g-color-gray-dark-v5 g-font-size-10">from</span> $12,000</span>
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->
                    </div>
                    <!-- End Products - Address -->

                    <!-- Products - List of Details -->
                    <ul class="d-flex list-inline g-brd-y g-brd-gray-light-v3 mb-0">
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-real-estate-004 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-brd-x g-brd-gray-light-v3 g-py-13 mr-0">
                        <i class="icon-real-estate-064 u-line-icon-pro"></i>
                      </li>
                      <li class="list-inline-item col-4 g-font-size-20 text-center g-px-0 g-py-13 mr-0">
                        <i class="icon-furniture-017 u-line-icon-pro"></i>
                      </li>
                    </ul>
                    <!-- End Products - List of Details -->
                  </div>
                  <a class="btn btn-block g-brd-top-none g-brd-gray-light-v3 g-brd-primary--hover g-color-white--hover g-bg-secondary g-bg-primary--hover g-font-weight-600 rounded-0 g-px-18 g-py-15" href="page-single-item-1.html">
                    See Details
                    <i class="align-middle ml-2 fa fa-angle-right"></i>
                  </a>
                </article>
                <!-- End Products -->
              </div>
            </div>
            <!-- End Products -->
          </div>
        </div>

        {% set contentTarget = "#shortcode27" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v27 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>
  <script src="{{ root }}assets/vendor/circles/circles.min.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.rating.js"></script>
  <script src="{{ root }}assets/js/components/hs.chart-pie.js"></script>
  <script src="{{ root }}assets/js/components/hs.carousel.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

      // initialization of carousel
      $.HSCore.components.HSCarousel.init('.js-carousel');

      // initialization of rating
      $.HSCore.components.HSRating.init($('.js-rating'), {
        spacing: 4
      });

      // initialization of chart pies
      var items = $.HSCore.components.HSChartPie.init('.js-pie');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
