<section>

    <div class="grid grid-cols-1 gap-4 ">
        <div class="col-span-1">
            <h1 class="text-3xl/8 m-0">
                <span>{{data.brand|raw}} </span>
                <span class="font-light">{{data.model|raw}}</span>
            </h1>
            <div>
                <img class="w-full h-[180px] my-4 object-contain" src="{{data.image}}" alt="{{data.brand|raw}} {{data.model|raw}}">
            </div>
        </div>
        <div class="col-span-1">

            {% include "templates/components/prodotti/highlights.twig" %}
            
            <div class="flex items-center gap-2 mt-4">
                {# Punteggio Hardware #}
                {% if product.hardware_score %}
                    <div class=" border border-primary text-primary rounded p-2 flex flex-col items-center size-14">
                        <span class="text-base font-bold leading-none">{{ product.hardware_score }}</span>
                        <span class="text-[10px] leading-none">Hard<br>ware</span>
                    </div>
                {% endif %}
        
                {# Qualità Prezzo #}
                {% if product.quality_price %}
                    <div class="border bg-slate-200 text-black rounded p-2 flex flex-col items-center size-14">
                        <span class="text-base font-bold leading-none">{{ product.quality_price }}</span>
                        <span class="text-[10px] leading-none">Qualità<br>Prezzo</span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>