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

<a href="{{card.link}}" class="lg:max-w-md block select-none relative group">

    {% if card.image.sizes.list_small.url != '' %}
    <div class="{% if has_comment %}card_clip_path_medium{% endif %}">
        <img loading="lazy" src="{{card.image.sizes.list_small.url}}" alt="" class="w-full scale-x-[-1] h-40 lg:h-48 object-cover rounded-t-lg group-hover:opacity-90">
    </div>


    {% else %}
    <div class="bg-slate-100 w-full h-48 rounded-t-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 %}


    {% 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-8 relative">
            <span class="absolute -mt-[2px] 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 %}



    <div class="p-4 lg:p-4 min-h-24 lg:min-h-28 border bg-white rounded-b-lg">
       {#  {% include "templates/components/cards/info-labels.twig" with {"show_comments": false} %} #}
        <div class="line-clamp-3 text-2xl/7 lg:text-xl/5 font-semibold whitespace-normal">{{card.title|raw}}</div>
    </div>
</a>

