<section class="home-reason"> <div class="container position-relative z-3"> <div class="row justify-content-center"> <div class="col-md-10 col-12"> <h2 class="page-title mb-3" data-aos="fade-up">{{ block.title }}<br> {{ block.subTitle }}</h2> </div> </div> <div class="row align-items-center align-content-center position-relative"> <div class="col-md-7 order-md-0 order-1 text-center" data-aos="fade-up"> <picture class="picture-lazy"> {% if not isMobile %} <source src="{{ getImageWebp(getImageBySize(block.imageIcon,'small')) }}" data-srcset="{{ getImageWebp(block.imageIcon) }}" media="(min-width: 992px)" type="image/webp"> {% endif %} <img loading="lazy" src="{{ getImageWebp(getImageBySize(block.imageIcon,'small')) }}" data-src="{{ getImageWebp(getImageBySize(block.imageIcon,'thumb')) }}" class="img-fluid mb-5" alt=""> </picture> {% set items = block.content | json_decode %} <div class="reason-wrapper d-none d-lg-block" id="selector"> <div class="d-none d-lg-block" style="height: 100%;"> {% for itm in items %} <div class="collapse" id="block{{ loop.index }}" aria-labelledby="block1Data" data-bs-parent="#selector"> <div class="item-block"> {{ itm.content | raw }} </div> </div> {% endfor %} </div> </div> </div> <div class="col-md-5 order-md-1 order-0" data-aos="fade-up"> <ul class="home-reason-list"> {% for itm in items %} <li id="block{{ loop.index }}Data" class="reason-item" data-index="{{ loop.index }}" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseReason" data-bs-target="#block{{ loop.index }}"> <span>{{ itm.title }}</span> <p> {{ itm.description | striptags | raw }} </p> </li> <div class="d-block d-lg-none"> <div class="collapse" data-index="{{ loop.index }}" id="block{{ loop.index }}" aria-labelledby="block1Data" data-bs-parent="#selector"> <div class="item-block "> {{ itm.content | raw }} </div> </div> </div> {% endfor %} </ul> </div> </div> </div></section>