<div class="container pt-5 justify-content-center">
  <section>
    <div class="container py-3 preamble">
      <p>{% block body %}{{ this.body }}{% endblock %}
    </div>
  </section>
  <section>
    <div class="container">
      <div class="row">
        {% for child in this.children|sort(attribute='key') %}
          <div class="col-sm-6 col-md-4 col-sm-12 col-xl-4 py-4">
            <div class="card h-100 p-2">
              <div class="card-body">
                <h2 class="card-title ">{{ child.title }}</h2>
                <p class="card-text">{{ child.subtitle }}</p>
                <div class="illo-container">
                  <img src="/static/images/home/png/{{ child.section_id }}.png" class="img-fluid" alt="{{ child.section }}" />
                </div>
              </div>
              <a href="{{ child.path|url }}" class="btn btn-primary">{{ child.cta }}</a>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
</div>
