{% extends "layout.nunjucks" %}

{% block content %}
    <main>
        <div class="container">
            {% for key, b in index.promo_blocks %}
            <section id="{{key}}" class="section section--style-a">
                <div class="section__block--a">
                    <h2 class="section__title">{{b.title}}</h2>
                    <p class="section__body">{{b.body}}</p>
                </div>
                <div class="hex-grid{% if b.offset %} hex-grid--offset{% endif %} section__block--b">
                {% for p in b.promos %}
                    <article class="promo {{p.class}}{% if not p.img %} promo--closed{% endif %}">
                        <div class="promo__inner">
                            <a class="promo__content" href="{{p.url}}">
                                {% if p.img %}
                                <img src="{{p.img}}" alt="" class="promo__media"/>
                                {% endif %}
                                <div class="promo__title"><h3 class="h5">{{p.title}}</h3></div>
                                <div class="promo__body"><p>{{p.body}}</p></div>
                            </a>
                        </div>
                    </article>
                {% endfor %}
                </div>
            </section>
            {% endfor %}
        </div>
    </main>
{% endblock %}