{{#
@name Default Card
@desc A Simple Card
#}}

<!-- /components/_default_card.antlers.html -->
<div
    class="group flex flex-col h-full bg-white border border-gray-200 shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
    <div class="h-52 flex flex-col justify-center items-center bg-blue-600 rounded-t-xl">
        <img src="{{featured_image}}" loading="lazy" alt="{{featured_image:alt}}"
            class="h-full w-full object-cover object-center rounded-t-xl" />
    </div>
    <div class="p-3 md:p-4">
        <span class="block mb-1 text-xs font-semibold uppercase text-yellow-800">
            {{category['title']}}
        </span>
        <a class="w-full text-gray-700"
            href="{{url}}">
            <h3 class="text-base font-medium text-beige-ecru">
                {{title}}
            </h3>
        </a>
        <p class="mt-3 text-gray-500 text-sm">
            {{teaser}}
        </p>
    </div>
</div>
<!-- End: /components/_default_card.antlers.html -->