{% include 'quarks/_loadCssComponent' with {
    name: '_gridOfImages'
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="container gridOfImages bg-{{ index.index0 }} {{ separation }}">
    <div class="row justify-content-center">
        <div class="col-12 col-md-10">
            <h2 class="gridOfImages__title text-center py-3 px-5">{{component.blockTitle}}</h2>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-12 {{component.columns is not empty ? component.columns[0].slug }}">
            <div class="gridOfImages__list">
                {% for item  in component.listimgwithlink.all() %} 
                   {% set image = item.image.one %}
                   {% if item.linkItem is not empty %}
                        <a {{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">
                   {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</section>