<div class="position-relative"> {% if productProductAddons|length > 3 %} <div class="pointer prev-{{class}}-slid position-absolute l--30-sm l-0 zi-99 vertical-arrow"> <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/> </div> <div class="pointer next-{{class}}-slid position-absolute r--30-sm r-0 zi-99 vertical-arrow"> <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/> </div> {% endif %} <div class="{{class}}"> {% for key, productProductAddon in productProductAddons %} {% set productAddon = productProductAddon.productAddon %} <div class="pax-15" type="button" data-toggle="modal" data-target="#{{class}}Modal{{loop.index}}"> <div class="bgc-white text-center br-8 boxShadow2 pax-40-lg pax-20 pat-20 pab-30 d-flex flex-column justify-content-between"> <div class="he-120 d-flex align-items-center justify-content-center"> <img src="{{ asset(vich_uploader_asset(productAddon, 'productAddonFile'))|imagine_filter('medium') }}" alt="{{ productAddon.title }}" class="img-contain"/> </div> <h4 class="fs-18 fw-600 c-204A9A mat-40 product-{{class}}"> {{ productAddon.title }} </h4> <div class="fs-14 c-2C3E73 lh2-19 mab-22 he-75 overflow-hidden"> {{ productAddon.intro|raw }} </div> <button type="button" class="btn btn1 br-8 w-100" data-toggle="modal" data-target="#{{class}}Modal{{loop.index}}"> {{"addon.readmore.btn"|trans}} </button> {# <div> {{ productAddon.description|raw }} </div>#} </div> </div> {% endfor %} </div></div>