{% set amazon_logo = '<img src="'~ assets_dir ~'/brands/amazon_logo.svg" alt="Amazon" class="inline-block w-[58px] align-[-7px] h-auto">' %}
{% set ebay_logo = '<img src="'~ assets_dir ~'/brands/ebay_logo.svg" alt="Ebay" class="inline-block w-[45px] align-[-3px] h-auto">' %}



{% for spec in section.sections_specs %}

{% set mkt_color = '' %}

{% if 'amazon' in spec.titolo|lower %}  
    {% set mkt_color = 'bg-amber-500 text-white' %}
{% elseif 'ebay' in spec.titolo|lower %}
    {% set mkt_color = 'bg-blue-500 text-white' %}
{% else %}
    {% set mkt_color = 'bg-slate-100 text-slate-700 font-normal' %}
{% endif %}

<div class="text-center my-4">
    <div class="text-lg font-bold block">{{ spec.titolo|replace({ 'Amazon': amazon_logo, 'eBay': ebay_logo }) | raw }}</div>
</div>
<div class="grid grid-cols-2 gap-4 justify-between text-center text-sm mb-6">    
    {% for value in spec.values %}
        <div>
            <a href="{{ value.url }}" target="_blank" rel="nofollow" class="block text-xl font-bold py-2 px-4 {{ mkt_color }} rounded-md">{{ value|raw }}</a>
        </div>
    {% endfor %}
</div>
{% endfor %}