
<div>
    <div class="group lg:max-w-md max-w-xs flex flex-col text-center items-center relative border hover:shadow-xl p-2 lg:p-4 rounded-lg">                
    
        <button
            type="button"
            class="absolute top-2 right-2 z-10 border-2 rounded-full p-1.5 cursor-pointer transition-colors"
            :class="Alpine.store('productCompare').selectedProducts.some(p => p.id === '') ? 'text-emerald-500 border-emerald-500' : 'text-slate-400 border-slate-300 hover:border-primary hover:text-primary'"
            @click.prevent="Alpine.store('productCompare').selectedProducts.some(p => p.id === '') ? Alpine.store('productCompare').removeFromCompare('') : Alpine.store('productCompare').addToCompare({ id: '', producer_name: '', model: '', image_url: '' })"
        >
            <template x-if="Alpine.store('productCompare').selectedProducts.some(p => p.id === '')">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
            </template>
            <template x-if="!Alpine.store('productCompare').selectedProducts.some(p => p.id === '')">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-3.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
            </template>
        </button>

        <a title="Scheda tecnica" href="https://www.hdblog.it" class="w-28 lg:w-28 text-center lg:text-left h-32 max-h-32 flex items-center flex-shrink-0 ">
            <img src="" alt=" " class="block mx-auto object-contain lg:object-left text-white max-h-32" width="" height="">
        </a>

        <a title="Scheda tecnica" href="https://www.hdblog.it" class="py-4 px-1 w-full">
            <div class="text-primary-dark font-bold text-xs"></div>
            <div class="line-clamp-3 text-base leading-5 font-semibold whitespace-normal min-h-10"></div>


        </a>




                <a href="https://www.hdblog.it" class="mt-2 flex h-10 items-center justify-center rounded-md bg-primary-dark hover:bg-primary  p-2 text-white w-full">
            <span class="text-sm">Scheda tecnica</span>
        </a>
        
    </div>
</div>
