{{#
    @name Basic Card
    @desc Image and Content with Stretched Buttons
#}}

<!-- /components/_basic_card.antlers.html -->
   <!-- Card -->
   <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 transition duration-200 group-hover:scale-110" />
    </div>
    <div class="p-4 md:p-6">
      <span class="block mb-1 text-xs font-semibold uppercase text-yellow-800">
        {{category['title']}}
      </span>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-300 dark:hover:text-white">
        {{title}}
      </h3>
      <p class="mt-3 text-gray-500 text-sm">
        {{teaser}}
      </p>
    </div>
    <div class="mt-auto flex bg-beige-ecru border-t border-beige-ecru divide-x divide-beige">
      <a class="w-full py-3 px-4 inline-flex bg-beige-ecru justify-center items-center gap-2 rounded-bl-xl font-medium text-gray-700 shadow-sm align-middle hover:bg-beige-french focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm sm:p-4 dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="{{url}}">
       Explore
      </a>
    </div>
  </div>
  <!-- End Card -->
<!-- End: /components/_basic_card.antlers.html -->