<% layout('layouts/customer-boilerplate')  -%>

    <div class="container">
        <div class="row row-cols-1 row-cols-md-2 g-4">

            <div class="col">
                <a href="/products?category=fruits">
                    <div class="card" style="cursor: pointer;">
                        <img src="img/fruits.jpg" class="card-img-top" alt="...">
                        <div class="card-body card-img-overlay">
                            <h5 class="card-title" style="color: aliceblue;">Browse fruits</h5>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col">
                <a href="/products?category=vegetables">
                    <div class="card" style="cursor: pointer;">
                        <img src="img/vegetables.jpg" class="card-img-top" alt="...">
                        <div class="card-body card-img-overlay">
                            <h5 class="card-title" style="color: aliceblue;">Browse vegetables</h5>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col">
                <a href="/products?category=meat">
                    <div class="card" style="cursor: pointer;">
                        <img src="img/meat.jpg" class="card-img-top" alt="...">
                        <div class="card-body card-img-overlay">
                            <h5 class="card-title" style="color: aliceblue;">Browse meat</h5>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col">
                <a href="/products?category=spices">
                    <div class="card" style="cursor: pointer;">
                        <img src="img/spices.jpg" class="card-img-top" alt="...">
                        <div class="card-body card-img-overlay">
                            <h5 class="card-title" style="color: aliceblue;">Browse spices</h5>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>