{% for room in rooms %}<section class="room lazy-animation" id="{{ room.title |replace({' ': '-'}) |lower }}"> <div class="container"> <h3 class="room--title">{{ room.title }}</h3> <button class="room--link js-more-room" data-reverse="{{ 'app.global.less_room_info' | trans }}" data-front="{{ 'app.global.more_room_info' | trans }}"> {% include 'partials/global/svg/icon-arrow-down.svg.twig' %} </button> <button class="room--button button green is-dark js-book"> <span>{{ 'app.global.book' | trans }}</span> </button> <div class="room--content"> <div class="room--details"> <div class="room--description">{{ room.description | raw }}</div> <div class="room--feature-container"> {% for ksp in room.keySellingPoints %} <div class="room--feature"> {% include 'partials/global/svg/'~ksp.iconClass~'.svg.twig' %} <h3 class="room--feature-text"> {{ ksp.title }} </h3> </div> {% endfor %} </div> {% if room.showAdvantagesLink is defined and room.showAdvantagesLink %} <a class="room-anchor link green" href="#experience-benefits"><span>{{ 'room.ecoactions.button' | trans }}</span></a> {% endif %} </div> {% if room.gallery %} <div class="room--media media-slide {% if room.gallery.medias and room.gallery.medias|length > 1 %}js-room-slide{% endif %}"> {% for image in room.gallery.medias %} <div class="room--media-item"> <picture-component class="js-picture-component is-absolute" :image="{{ picture_data(image, null) }}"></picture-component> </div> {% endfor %} </div> {% endif %} </div> </div></section>{% endfor %}