<div class="row mt-12 sectors md:pb-12 mb-12"> <div class="col-12"> <h2 class="text-center mb-6">Our Sectors</h2> </div> {% for sector in sectors %} <div class="col-12 mb-10 sector"> <div class="sector--icon text-center"> {{ sector.iconClass|raw }} </div> <div class="row sector-row"> <div class="md:col-5 flex {% if (loop.index is odd) %}md:order-1 order-2 justify-start md:justify-end{% else %}md:order-2 order-2 md:offset-2{% endif %}"> {% if sector.activeChildren|length > 0 %} <ul {% if (loop.index is odd) %}class="right-align"{% endif %}> {% for child in sector.activeChildren %} <li> <a href="{{ generatePath( app.request, child.linkedPageId, {'sector_slug' : child.slug } ) }}">{{ child.title }}</a> </li> {% endfor %} </ul> {% endif %} </div> <div class="md:col-5 {% if (loop.index is odd) %}md:order-2 order-1 md:offset-2{% else %}md:order-1{% endif %}"> <h3>{{ sector.title }}</h3> {{ allowInlineEditor(sector, 'excerpt')|raw }} <a class="btnlink btnlink-primary mt-6 md:mt-12 mb-6 md:mb-0" href="{{ generatePath( app.request, sector.linkedPageId, {'sector_slug' : sector.slug } ) }}">Read More</a> </div> </div> </div> {% endfor %}</div>