
<div class="row cols-xs-space cols-sm-space cols-md-space">
{% for item in products %}
    {% comment %}{{ item.title }} - {{ item.sku }}{% endcomment %}

    <div class="col-lg-4">
        <div class="block product no-border z-depth-2-top z-depth-2--hover">
            <div class="block-image ">
                <a  href="/products/{{ item.id }}" target="_blank" >

                    {% if item.images and item.images[0].image_url %}
                        {% assign image_url = item.images[0].image_url %}
                      
                        {% if image_url contains 'http' %}
                            <img src="{{ image_url }}" class="img-center default-image-thumbnail">
                        {% else %}
                            <img src="{{ site.image_base_url }}{{ image_url | append: '?x-oss-process=image/resize,m_pad,w_300,h_300' }}" class="img-center default-image-thumbnail">
                        {% endif %}
                    {% else %}
                        <div class="img-center default-image-thumbnail no-image-placeholder-thumbnail">
                            <span>No Image</span>
                        </div>
                    {% endif %}
                </a>
                <span class="product-ribbon product-ribbon-right product-ribbon--style-1 bg-blue text-uppercase">New</span>
            </div>

            <div class="block-body text-center">
                <h3 class="heading heading-5 strong-600 text-capitalize title-over-flow" >
                    <a  href="/products/{{ item.id }}" target="_blank"  title=" {{ item.title | strip_html  }}">
                        {{ item.title |decode_html_entities| strip_html  }}
                    </a>
                </h3>
                <p class="product-description title-over-flow">
                    {{ item.content | decode_html_entities| strip_html | default: "No description " }}
                </p>
                <div class="product-buttons mt-4">
                    <a href="/products/{{ item.id }}" class="btn  btn-gray-dark btn-circle px-4" target="_blank">
                        Explore
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endfor %}
</div>

