
{% set has_comment = card.comments_count.data > 0 %}

<a href="{{card.link}}" class="rounded-[12px] shadow-md overflow-hidden relative select-none group">


    {% if card.image.sizes.intext.url %}
    <div class="{% if has_comment %}card_clip_path_small{% endif %}">
        <img fetchpriority="high" loading="eager" src="{{card.image.sizes.intext.url}}" width="300" height="300" alt="{{card.title|raw}}" class="rounded-[12px] w-full h-full min-h-[240px] object-cover z-1">
    </div>
    <div class="rounded-[12px] absolute bottom-0 h-full w-full bg-gradient-to-t from-black via-transparent via-85%  opacity-90 group-hover:opacity-60 transition-opacity"></div>
    {% if has_comment %}
    <div class="badge absolute top-1 right-1">
        <div class="flex items-center justify-center flex-col bg-white text-primary-light rounded-full text-xs size-6 relative">
            <span class="absolute text-xs text-white">{{card.comments_count.data}}</span>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8 -mb-1 block opacity-100">
                <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 0 0-.266.112L8.78 21.53A.75.75 0 0 1 7.5 21v-3.955a48.842 48.842 0 0 1-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97Z" clip-rule="evenodd" />
            </svg>
        </div>
    </div>
    {% endif %}
    {% else %}
    <div class="bg-slate-500 w-full h-full rounded-lg flex items-center justify-center text-slate-300">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
        </svg>
    </div>
    {% endif %}



    <div class="p-4 absolute bottom-0">
        <h2 class="m-0 text-white text-base leading-5 font-semibold whitespace-normal relative min-w-full">{{card.title|raw}}</h2>
    </div>
</a>