{% load wagtailcore_tags wagtailimages_tags mandel_template_engine %}
<section class="mandel-block"><div class="container">
{% if value.heading %}<h2 class="display-6">{{ value.heading }}</h2>{% endif %}{% if value.body %}{{ value.body|richtext }}{% endif %}
<div class="row g-4 mt-2">{% for item in value.items %}<div class="col-md-6 {% if value.columns == '2' %}col-lg-6{% elif value.columns == '4' %}col-lg-3{% else %}col-lg-4{% endif %}"><article class="h-100 p-4 border rounded-4 position-relative">{% if item.image %}{% picture item.image format-{avif,webp,jpeg} width-700 class="img-fluid rounded-3 mb-3" %}{% endif %}<h3 class="h5">{{ item.heading }}</h3><p>{{ item.body }}</p>{% if item.link.page or item.link.external_url %}{% mandel_link_url item.link as href %}<a href="{{ href }}" class="stretched-link"{% if item.link.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}><span class="visually-hidden">{{ item.link.label|default:item.heading }}</span></a>{% endif %}</article></div>{% endfor %}</div>
</div></section>