{% if aside_models is not empty %}
    <div>

        <div class="block font-codensed mb-4 text-center">Confronta con:</div>


        {% for item in aside_models %}
        {% set img_width  = '100%' %}
        {% set img_height = 80 %}
        
        <a 
            href="{{item.compare_url}}"
            class="card_product bg-white flex items-center relative lg:m-2 lg:px-6 p-2 lg:rounded-[12px] hover:shadow-lg transition-shadow"
         >
            <div class="w-24 lg:w-16 text-center lg:text-left h-24 max-h-28 flex items-center flex-shrink-0 ">
                <img class="block mx-auto object-contain lg:object-left text-white max-h-20" width="{{img_width}}" height="{{img_height}}" src="{{item.image_url}}" alt="{{item.brand}} {{item.model}}">
            </div>
            <div class="pl-2">
                <div class="text-sm text-slate-500 -mb-1">{{item.brand}}</div>
                <div class="font-semibold text-base font-condensed">{{item.model}}</div>
            </div>
            <div 
                
                class="absolute border-2 right-6 top-12 -mt-2.5 text-primary rounded-full border-primary p-2 cursor-pointer"
            
                >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
            </div>
        </a>
        
    
        
        {% endfor %}
    </div>
{% endif %}