{% load wagtailcore_tags wagtailimages_tags mandel_template_engine %}
<section class="mandel-block mandel-hero mandel-hero--{{ value.alignment }}">
  <div class="container"><div class="row align-items-center g-5">
    <div class="{% if value.alignment == 'center' %}col-lg-10 mx-auto text-center{% else %}col-lg-6{% endif %}">
      {% if value.eyebrow %}<p class="mandel-eyebrow mb-2">{{ value.eyebrow }}</p>{% endif %}
      <h1 class="display-4 fw-semibold">{{ value.heading }}</h1>
      {% if value.body %}<div class="lead">{{ value.body|richtext }}</div>{% endif %}
      <div class="d-flex flex-wrap gap-2 mt-4{% if value.alignment == 'center' %} justify-content-center{% endif %}">
        {% if value.primary_action.label %}{% mandel_link_url value.primary_action as href %}<a class="btn btn-primary" href="{{ href }}"{% if value.primary_action.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ value.primary_action.label }}</a>{% endif %}{% if value.secondary_action.label %}{% mandel_link_url value.secondary_action as href %}<a class="btn btn-outline-secondary" href="{{ href }}"{% if value.secondary_action.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ value.secondary_action.label }}</a>{% endif %}
      </div>
    </div>
    {% if value.image and value.alignment != 'center' %}<div class="col-lg-6">{% if value.mobile_image %}<div class="d-lg-none">{% picture value.mobile_image format-{avif,webp,jpeg} width-900 class="img-fluid rounded-4" %}</div><div class="d-none d-lg-block">{% picture value.image format-{avif,webp,jpeg} width-1200 class="img-fluid rounded-4" %}</div>{% else %}{% picture value.image format-{avif,webp,jpeg} width-1200 class="img-fluid rounded-4" %}{% endif %}</div>{% endif %}
  </div></div>
</section>