{% if products %}

<div class="row g-4">

    {% for product in products %}

    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">

        <div class="product-card">

            <div class="product-image">

                <a href="{{ product.href }}">

                    <img src="{{ product.thumb }}"
                         alt="{{ product.name }}"
                         loading="lazy">

                </a>

            </div>

            <div class="product-content">

                <h3>

                    <a href="{{ product.href }}">

                        {{ product.name }}

                    </a>

                </h3>

                <div class="price">

                    {% if product.special %}

                        <span class="special">

                            {{ product.special }}

                        </span>

                        <span class="old">

                            {{ product.price }}

                        </span>

                    {% else %}

                        <span class="normal">

                            {{ product.price }}

                        </span>

                    {% endif %}

                </div>

                <a href="{{ product.href }}"
                   class="btn-primary">

                    View Product

                </a>

            </div>

        </div>

    </div>

    {% endfor %}

</div>

{% else %}

<p style="text-align:center">

No Featured Products

</p>

{% endif %}