<section class="background-white section" data-brand-header> <div class="grid-container"> <div class="offices__title title title__center indent-m"> <div class="out" data-css-animation="out-in" style="--delay: .3s"> <div class="in"> <h2>{{ content.title }}</h2> </div> </div> </div> <div class="offices__text offices__text--center" data-css-animation="fade-in-up" style="--delay: .4s"> <p> {{ content.content|raw }} </p> </div> <div class="grid-x grid-margin-x"> <div class="cell medium-offset-1 medium-10"> <div class="offices__list" data-css-animation="stagger-list" style="--delay: .6s"> {% for city in content.bureaux %} <div class="offices__list-item" data-css-animation="stagger-item-right"> <div class="title title__no-center indent-xs"> <h3>{{ city.title }}</h3> </div> <address> <p>{{ city.address }}</p> </address> <div class="contacts__link">{{ 'Tel'|trans }}: <a href="tel:{{ city.phone }}">{{ city.phone }}</a></div> <div class="contacts__link"> {% if city.fax is defined and city.fax is not null %} {{ 'Fax'|trans }}: <a href="tel:{{ city.fax }}">{{ city.fax }}</a> {% endif %} </div> <div class="contacts__link"> {% if city.email is defined and city.email is not null %} {{ 'Email'|trans }}: <a href="mailto:{{ city.email }}">{{ city.email }}</a> {% endif %} </div> </div> {% endfor %} </div> </div> </div> </div> </section>