{% 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 %}
        <h2 {% if value.sr_only_label %}class="sr-only"{% endif %}>{{ value.heading }}</h2>
    {% 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>