<section class="mb-6">
    <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>
                  
                {{item}}
            </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>
                {{item}}
            </div>
        {% endfor %}
        </div>
    </div>
</section>