{{ attach_library('goizueta_theme/image-grid-container') }}

{% set attributes = attributes ? attributes.addClass('image-grid') : ' class="image-grid"' %}

<section{{ attributes|raw }}>
  {% if heading %}
    <div class="image-grid__heading--wrapper">
      {% include '@components/heading/heading.twig' with {
        "heading" : heading
      } only %}
    </div>
  {% endif %}

  <div class="image-grid__container splide">
    <div class="splide__track">
      <ul class="splide__list">
        {% for item in images %}
          <li class="splide__slide image-grid__item grid-item{{loop.index}}">{% include '@components/image-grid-card/image-grid-card.twig' with item %}</li>
        {% endfor %}
      </ul>
    </div>

    {# This is used as a container for splide's arrows and pagination. #}
    <div class="image-grid__pager splide__arrows">
      <ul class="splide__pagination"></ul>
    </div>
  </div>
</section>