<section class="about-history" style="background-image: url({{ block.image }})" id="history"> <h2 class="about-history-title">{{ block.title }}<br>{{ block.subTitle }}</h2> <div class="container-fluid"> <div class="row align-items-center justify-content-between align-content-center"> <div class="col-md-2"> <ul class="about-history-list"> {% set locale = app.request.get('_locale') %} {% set milestones = getMilestones(locale) %} {% for itm in milestones %} <li id="block{{ loop.index }}Data" data-bs-toggle="collapse" aria-expanded="{% if loop.index==1 %}true{% endif %}" aria-controls="collapseReason" data-bs-target="#block{{ loop.index }}"><span><span class="title">{{ itm.name }}</span></span></li> {% endfor %} </ul> </div> <div class="col-md-9"> <div class="reason-wrapper" id="selector"> {% for itm in milestones %} <div class="collapse {% if loop.index == 1 %}show{% endif %}" id="block{{ loop.index }}" aria-labelledby="block1Data" data-bs-parent="#selector"> <div class="item-block"> <div class="row align-items-center"> <div class="col-md-4"><h5 data-aos="zoom-out-up">{{ itm.name }}</h5> <ul> {% for sub in itm.items %} <li data-aos="fade-up" data-aos-anchor-placement="top-center"> {{ sub.description }} </li> {% endfor %} </ul> </div> <div class="col-md-8"> <div class="text-center"><img loading="lazy" src="{{ itm.image }}" class="img-fluid d-block" alt=""></div> </div> </div> </div> </div> {% endfor %} </div> </div> </div> </div></section>