<section class="mb-6 mt-4">

    
    {% set bg_color = theme.name == 'default' ? 'bg-[#A2CC20]' : 'bg-primary' %}
    <h2 class="text-xl {{bg_color}} text-white py-1 px-4 inline-block mb-6">Pro e contro</h2>


    <div class="grid md:grid-cols-2 gap-4">
        <div>
            {% for item in section.content.pros %}
            <div class="flex items-center {% if loop.last %}mb-0{% else %}mb-4{% endif %}">
                <div class="text-green-500 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>
                <div class="text-sm">{{item}}</div>
            </div>
        {% endfor %}
        </div>

        <div>
            {% for item in section.content.cons %}
            <div class="flex items-center {% if loop.last %}mb-0{% else %}mb-4{% endif %}">
                <div class="text-red-500 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>
                <div class="text-sm">{{item}}</div>
            </div>
        {% endfor %}
        </div>
    </div>
</section>