{% include 'quarks/_loadCssComponent' with {
    name: '_gridOfImages'
  } only %}
  
<section class="container gridOfImages ">
    <div class="row justify-content-center">
        <div class="col-12 col-md-10">
            <h2 class="gridOfImages__title text-center px-5">{{_block.blockTitle}}</h2>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-12 {{_block.columns is not empty ? _block.columns[0].slug }}">
            <div class="gridOfImages__list">
                {% for item  in _block.listimgwithlink.all() %} 
                   {% set image = item.image.one %}
                   {% if item.linkItem is not empty %}
                        <a class="px-3" {{item.linkItem.getLinkAttributes()}}><img data-src="{{image.getUrl()}}" src="{{image.getUrl()}}" alt="{{image.title}}"  loading="lazy" class="lazyload img-fluid"></a>
                   {% else %}
                        <img data-src="{{image.getUrl()}}" src="{{image.getUrl()}}" alt="{{image.title}}"  loading="lazy" class="lazyload img-fluid px-3">
                   {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</section>