{% load wagtailcore_tags %}

<div class="{% if not value.fluid %}container mx-auto{% endif %}" data-component="cards-section" data-variant="{{ value.theme_variant|default:'default' }}">
    <section class="card-section card-section-default card-section-bordered py-8 lg:py-12{% if value.theme_variant == 'bordered' %} bordered-variant{% else %} shadowed-variant{% endif %}">
        {% if value.heading %}
            {% if value.sr_only_label %}
                <h2 class="sr-only">{{ value.heading }}</h2>
            {% else %}
                <h2 class="text-2xl lg:text-3xl font-bold text-center mb-8 text-base-content">{{ value.heading }}</h2>
            {% endif %}
        {% endif %}
        
        {% if value.cards %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" data-card-count="{{ value.cards|length }}">
                {% for card in value.cards %}
                    {% include_block card %}
                {% endfor %}
            </div>
        {% endif %}
    </section>
</div>