[viewBag]
==
<!-- destinations-area start here -->
   <section class="destinations-area collections-area lightbg">
      <div class="container">
         <div class="collections-content text-center">
            <h3 class="h3-text wow fadeInUp">Experience our</h3>
            <h2 class="h2-text wow fadeInUp" style="color: #218ABD;">Destinations</h2>
            <p class="wow fadeInUp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
               Lorem Ipsum has been the industry's standard dummy text ever since the <br>
               1500s, when an unknown printer took a galley of type and scrambled  </p>
         </div>
        {% for product in products %}
        {% set colCounter = loop.index %}
         <div class="row">
            <div class="collection-image-div collection-image-div2 wow col-md-3 col-12 p-3 {% if colCounter % 2 %} destination-rounded-div fadeInLeft {% else %} rounded-div2 fadeInUp order-1 order-md-4 {% endif %}">
                {% if backendLoggedIn and editMode %}
                <a style="position:absolute;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/catalog/products/update/{{ product.id }}" role="button" target="_blank">Edit Item</a>
                {% endif %}
                
                {% set sectionFirst = product.sections|first %}
                {% for section in product.sections if section.tabsection.sectionslug == 'overview' %}
                    {% set sectionFirst = section %}
                {% endfor %}
                <a href="{{ 'travel'|page( {catslug:product.category.catslug, slug:product.slug, contentslug:sectionFirst.contentslug} ) }}">
                    <img class="w-100" noresize src="{{ product.preview_image|media }}" alt="image">
                    <h2 class="collection-h2 UberMove-medium">{{ product.title }}</h2>
                </a>
            </div>
            {% for image in sectionFirst.gallery|slice(0,3) %}
            <div class="collection-image-div collection-image-div2 overlay wow fadeInUp col-md-3 col-12 p-3 {% if colCounter % 2 %} fadeInLeft {% else %} order-{{ loop.index+1 }} order-md-{{ 4-loop.index }} {% endif %}">
                <a href="{{ 'travel'|page( {catslug:product.category.catslug, slug:product.slug, contentslug:sectionFirst.contentslug} ) }}">
                    <img class="w-100" noresize src="{{ image.image|media }}" alt="{{ image.title }}">
                    <h4 class="collection-h4">{{ image.title }}</h4>
                </a>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
      </div>
   </section>