<a href="{{card.link}}" class="w-full min-w-[140px] flex justify-between items-center rounded-2xl group p-2 shadow-md border hover:shadow-sm">
    <div class="flex gap-2 items-center">
     
        {% if card.image != '' %}
        <img class="object-cover mask mask-squircle size-12" src="{{card.image}}"
        alt="{{card.title|raw}}" />
        {% else %}
        <div class="bg-slate-100 flex-shrink-0 size-12 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="flex">
            <div class="max-w-16 whitespace-normal font-bold text-xs leading-3  uppercase ">
                {{card.title|raw}}
            </div>
        </div>
    </div>
</a>