{% load wagtailcore_tags %}

<div class="cards-container{% if value.theme.theme_variant %} cards-{{ value.theme.theme_variant }}{% endif %}"
     data-component="cards_container"
     data-variant="{{ value.theme.theme_variant|default:'default' }}">

    {% if not value.fluid %}<div class="container mx-auto">{% endif %}

    {% if value.heading %}
        {% include "wagtail_feathers/blocks/heading2_block.html" with large_spacing=True value=value.heading sr_only=value.sr_only_label %}
    {% endif %}

    {% if value.content %}
        <div class="cards-grid cards-cols-{{ value.columns|default:'3' }}">
            {% for card in value.content %}
                <div class="cards-grid-item">
                    {% include_block card %}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {% if not value.fluid %}</div>{% endif %}
</div>