<section class="hobbies-area" style="background:url('images/hobby/{{hobbiesArea.coverImage}}'); background-size:cover;"> <div class="hobbies-area-text"> <h2 class="hobbies-title">{{hobbiesArea.translate(locale).title}}</h2> <div class="outline"></div> <div class="hobbies-p">{{hobbiesArea.translate(locale).introduction|raw}}</div> </div> <div class="swiper-ctn"> <div class="swiper" id="hobbies-slider"> <div class="swiper-wrapper"> {% for item in hobbies %} <div class="swiper-slide hobbies-ctn"> <div class="hobbies-flex"> <div class="hobbies-text col-md-6 col-xs-12"> <h2 class="hobbies-title area-title">{{item.translate(locale).title}}</h2> <div class="line"></div> <div class="hobbies-p area-p"> {{item.translate(locale).introduction|raw}} </div> <a href="{{path('hobby_index')}}" class="read-more">{{hobbiesArea.translate(locale).callToAction}}</a> </div> <div class="hobbies-img col-md-6 col-xs-12"> <img src="images/lazy.png" data-src="images/hobby/{{item.coverImage}}" alt="{{item.translate(locale).title}}" class="lazy"> </div> </div> </div> {% endfor %} </div> <div class="swiper-nav"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> </div></section>