{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="deliCounters bg-{{ index.index0 }} {{ separation }}">
	<div class="container py-4">
		{% include 'components/_setHeadTitles' with {stylesClass: 'deliCounters__titulos'} %}
		{% set counters = component.counters1.all() ?? null %}
		{% if counters %}
			<div class="deliCounters__container">
				{% for item in counters %}
				<section class="deliCounters__item text-center pb-1  px-4" style="--imgbg:url({{item.backgroundImage.one.getUrl('rectangleCounters')}})">
					{% if (item.textBeforeCounter|length) > 0 %}
						<h3 class="mb-0 deliCounters__item-textbefore">{{item.textBeforeCounter}}</h3>
					{% endif %}
					{% if (item.counter|length) > 0 %}
						<h3 class="deliCounters__item--counter mb-0 counters" data-number="{{ item.counter }}">
							{{ item.counter }}
						</h3>
					{% endif %}
					{% if (item.description|length) > 0 %}
						<div class="deliCounters__item--description">
							{{ item.description }}
						</div>
					{% endif %}
				</section>
			{% endfor %}
			</div>
		{% endif %}
	</div>
</section>