
<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 %}
                        <img src="{{ site.image_base_url }}{{ item.images[0].image_url | append: '?x-oss-process=image/resize,m_lfit,h_200' }}"
                             class="img-center default-image-thumbnail">
                    {% 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">
                    <a  href="/products/{{ item.id }}" target="_blank" >
                        {{ item.title | strip_html }}
                    </a>
                </h3>
                <p class="product-description">
                    {{ item.content | strip_html | truncate: 20 | default: "No description " }}
                </p>
                {% comment %}<div class="product-colors mt-2">{% endcomment %}
                    {% comment %}<div class="color-switch float-wrapper">{% endcomment %}
                        {% comment %}<a href="#" class="bg-purple"></a>{% endcomment %}
                        {% comment %}<a href="#" class="bg-pink"></a>{% endcomment %}
                        {% comment %}<a href="#" class="bg-blue"></a>{% endcomment %}
                    {% comment %}</div>{% endcomment %}
                {% comment %}</div>{% endcomment %}
                <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>

