{% include 'quarks/_loadCssComponent' with {
    name: '_counterCarousel'
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="container counterCarousel bg-{{ index.index0 }} {{ separation }}">
    <div class="row">
        <div class="col-md-12">
            <h2 class="counterCarousel_title">{{component.blockTitle}}</h2>
        </div>
         {% if not component.fieldLinkCustomText.isEmpty() %}
			<div class="col-md-12 text-center text-md-center mb-4">
				{% include 'components/_btnArrow' with {
          btn: component.fieldLinkCustomText,
          parentClass: 'd-inline-block',
		  classCustom: 'btn_pink'
        } only %}
			</div>
		{% endif %}
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="counterCarousel_container">
                <div class="swiper counterCarousel_slide" data-sliderPreview="3">
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        {% for item in component.counterItems %}
                        <div class="swiper-slide">
                            <div>
                                <div class="counterCarousel_slidecard lazyload" data-bg="{{item.backgroundImage.one.getUrl('imageBlock')}}"
                                    style="--img:url('{{item.backgroundImage.one.getUrl('imageBlock')}}')">
                                    <div class="counterCarousel_slidecard--counter">
                                        <div class="w-80 py-3">
                                            {% if (item.textBeforeCounter|length) > 0 %}
                                            <span class="counters-before ms-2">{{ item.textBeforeCounter }}</span>
                                            {% endif %}
                                            {% if (item.counter|length) > 0 %}
                                            <span class="counters px-2" data-number="{{ item.counter }}">
                                                {{ item.counter }}
                                            </span>
                                            {% endif %}
                                            {% if (item.textAfterCounter|length) > 0 %}
                                            <span class="counters-before ms-2">{{ item.textAfterCounter }}</span>
                                            {% endif %}
                                        </div>
                                        {% if (item.textCounter|length) > 0 %}
                                        <span class="additionalText">{{ item.textCounter }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
    {% include 'quarks/_loadJsComponent' with {
        name:  '_' ~ component.type
      } only %}
</section>