{% if advantages|length > 0 %}
<article class="experience-benefits" id="experience-benefits">
<div class="container">
{% if hotel.advantagesTitle is defined and hotel.advantagesTitle is not empty %}
<h3 class="experience-benefits--title title-m">{{ hotel.advantagesTitle }}</h3>
{% endif %}
{% if hotel.advantagesSubtitle is defined and hotel.advantagesSubtitle is not empty %}
<div class="experience-benefits--subtitle subtitle-caps">{{ hotel.advantagesSubtitle }}</div>
{% endif %}
<div class="experience-benefts--list" id="experience-item">
{% for advantage in advantages %}
<div class="experience-benefits--item lazy-animation">
{# <img class="experience-benefits--item-icon" src="{{ advantage.image | resize(100) }}">#}
{% include 'partials/global/svg/'~advantage.iconClass~'.svg.twig' ignore missing %}
<div class="experience-benefits--item-title">
{{ advantage.title }}
</div>
{% if advantage.shortText %}
<div class="experience-benefits--item-text">
{{ advantage.shortText }}
</div>
{% endif %}
{% if advantage.showPopup %}
<a class="link green js-opener-popup" data-dest="popup-benefits-{{ loop.index }}">
<span>{{ 'app.global.read_more' | trans }}</span>
</a>
{% endif %}
{% if advantage.showLink %}
<a class="link green" href="{{ advantage.link }}">
<span>{{ 'app.global.read_more' | trans }}</span>
</a>
{% endif %}
{% if advantage.anchorToAdvantagesBlock %}
<a class="link green js-anchor" data-anchor="#advantages">
<span>{{ 'app.global.read_more' | trans }}</span>
</a>
{% endif %}
</div>
{% endfor %}
</div>
<div class="button-slide">
<div class="button-slide--counter">
<span class="js-slide-counter">1</span>
/
{{ advantages | length }}
</div>
</div>
{% for advantage in advantages %}
<div class="benefits--popup js-container--popup" id="popup-benefits-{{ loop.index }}">
<div class="benefits--popup-overlay js-closer-popup"></div>
<div class="benefits--popup-container">
<div class="benefits--popup-content">
<div class="benefits--popup-header">
<a class="benefits--popup-close js-closer-popup" href="#">
{{ 'app.global.get_back' | trans }}
{% include 'partials/global/svg/close.svg.twig' %}
</a>
<div class="benefits--popup-intro">
{# <img class="benefits--popup-icon" src="{{ advantage.image | resize(100) }}">#}
{% include 'partials/global/svg/'~advantage.iconClass~'.svg.twig' ignore missing %}
<div class="benefits--popup-title">{{ advantage.title }}</div>
</div>
</div>
<div class="benefits--popup-description">
{{ advantage.content | raw }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</article>
{% endif %}