{% 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">

                {{cat.title}}

            </h1>
        </div>
        {% if image %}

        {% picture image 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.url}}"
                class="bg-second hover:bg-main font-bold w-[80%] px-2 py-1 mb-4 rounded-xl text-xl">Get Detail</a>
        </div>
    </a>
</div>