<div class="row gy-3 wysiwyg-three-images-area__images js-lightbox {{ className|default('') }}"> {% if images|length == 2 %} {% for image in images %} <div class="col-md-6"> {{ _self.image(image, '53x26') }} </div> {% endfor %} {% elseif images|length == 3 %} {% for image in images %} {% set isBig = (positionBigImage == 'left' and loop.index == 1) or (positionBigImage == 'center' and loop.index == 2) or (positionBigImage == 'right' and loop.index == 3) %} <div class="{{ isBig ? 'col-md-6' : 'col-6 col-md-3' }} {% if isBig %} order-mobile-first {% endif %}"> {{ _self.image(image, isBig ? '53x26' : '1x1') }} </div> {% endfor %} {% elseif images|length == 4 %} {% for image in images %} <div class="col-6 col-md-3"> {{ _self.image(image, '1x1') }} </div> {% endfor %} {% endif %}</div>{% macro image(image, aspectRatio) %} <a href="{{ image.thumbnail('lightbox') }}" class="d-block ratio ratio-{{ aspectRatio }} js-lightbox__item" data-sub-html="{{ image.metadata('title') }}" > {{ image.thumbnail('wysiwyg-img-' ~ aspectRatio).getHtml({ 'imgAttributes': { 'class': 'js-lazy-img ratio-item' }, 'lowQualityPlaceholder': true })|raw }} </a>{% endmacro %}