<a {{card.linkAttributes|raw}} class="w-full rounded-lg group whitespace-normal cursor-pointer">
    <div class="relative rounded-xl border border-slate-100 shadow-lg lg:group-hover:shadow-2xl bg-white p-4 min-h-80 select-none">
        <div class="h-40 w-40 mx-auto">
            <img class="object-contain block h-40 w-40 rounded-xl" src="{{card.image}}" alt="{{card.title|raw}}" />
            {% if card.priceDiscount is not empty %}
            <span class="absolute top-0 left-0 m-4 rounded-full bg-red-100 flex items-center px-3 py-1 text-center text-xs font-semibold text-red-600">{{card.priceDiscount|raw}}</span>
            {% endif %}    
        </div>
        <div class="min-h-28">
            <h2 class="text-xl leading-5 tracking-tight text-slate-900 font-semibold line-clamp-2 my-4 min-h-10">
                {{card.title|raw}}
            </h2>
            <div class="mb-8 flex items-baseline">
                <span class="mr-2 text-2xl font-bold ">
                    {{card.price|raw}}
                    <small style="vertical-align: 5px;" class="-ml-1 text-xs font-normal">&euro;</small>
                </span>

                {% if card.priceFull is not empty %}
                <span class="font-medium text-red-600 text-sm line-through">
                    {{card.priceFull|raw}}
                    <span class="-ml-1">&euro;</span>
                </span>
                {% endif %}
        
            </div>
        </div>
        <div class="flex items-center justify-center rounded-md bg-emerald-500 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-emerald-600 uppercase">
            <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            vedi l'offerta
        </div>
    </div>
</a>