{% load wagtailimages_tags %}

<div class="bg-white shadow-2xl grow-0 w-full md:w-80  h-auto rounded-xl ">
    <a href="{{cat.url}}" class="flex flex-col items-center">
        <div class="py-2 flex w-full justify-center items-center bg-main rounded-t-xl font-bold">
            <h1 class="text-lg md:text-xl text-center uppercase">
                {% if cat.catMenu %}
                {{cat.catMenu}}
                {% else %}
                {{cat.title}}
                {% endif %}

            </h1>
        </div>
        {% if cat.catImage %}
        {% picture cat.catImage format-{webp} class="w-full h-auto  rounded-lg" %}
        <!-- class="p-4 w-96 h-56 md:h-72"  -->
        {% elif cat.catImageText %}
        <div class="text-9xl md:text-[14.5rem]">
            {{cat.catImageText|safe}}
        </div>
        {% elif cat.prImage %}

        {% picture cat.prImage format-{webp} class="w-full h-auto rounded-lg" %}
        {% else %}
        <div class="p-4 w-96 h-56 md:h-64">
            

        </div>

        {% endif %}
        <!-- <img src="{{cat.catImage.file.url}}" alt="{{cat.catTitle}}" class="w-96 h-56 md:h-72" /> -->
        <div class="flex justify-center text-center">

            <a href="{{cat.prod_deals.first.scURL}}" target="_blank" class="bg-second hover:bg-main font-bold w-[80%] px-2 py-1 mb-4 rounded-xl text-xl">Buy Now</a>
        </div>
    </a>
</div>