{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="resultsAchieved bg-{{ index.index0 }} {{ separation }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %}

		{% set countersList = component.countersList.all() ?? null %}
		{% if countersList %}
			<section class="row gy-4 gx-3 resultsAchieved__counters pt-4 row-cols-1 row-cols-md-{{
										        component.grid
										        }}">
				{% for item in countersList %}
					<div class="resultsAchieved__counters--item">
						<section class="text-center">
							{% if (item.textStart|length) > 0 %}
								<span class="additionalText ms-2">{{ item.textStart }}</span>
							{% endif %}
							{% if (item.counter|length) > 0 %}
								<span class="counters px-2 px-xl-0" data-number="{{ item.counter }}">
									{{ item.counter }}
								</span>
							{% endif %}
							{% if (item.additionalText|length) > 0 %}
								<span class="additionalText">{{ item.additionalText }}</span>
							{% endif %}
						</section>
						{% if (item.description|length) > 0 %}
							<div class="description text-center px-lg-3">
								{{ item.description }}
							</div>
						{% endif %}
					</div>
				{% endfor %}
			</section>
		{% endif %}
		{% if (component.footerText|length) > 0 %}
			<p class="resultsAchieved__footer mb-0 pt-3">
				{{ component.footerText }}
			</p>
		{% endif %}
	</div>
</section>