{% load i18n %}

<div class="my-8 theme-{{ value.theme.theme_variant|default:'default' }}">
    <div class="{% if not value.fluid %}container mx-auto{% endif %}">
        {% if value.heading %}
            <h2 class="mb-6 text-3xl font-bold {% if value.sr_only_label %}sr-only{% endif %}">
                {{ value.heading }}
            </h2>
        {% endif %}
        <div class="grid gap-6 grid-cols-1 md:grid-cols-{{ value.columns|default:'1' }} {% if value.columns == 3 %}md:grid-cols-2 lg:grid-cols-3{% elif value.columns == 4 %}md:grid-cols-2 lg:grid-cols-4{% elif value.columns == 2 %}md:grid-cols-2{% endif %}">
            {% for item in value.items %}
                <div class="w-full overflow-hidden">
                    {{ item.content|safe }}
                </div>
            {% endfor %}
        </div>
    </div>
</div>