{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type 
} only %}
<section {{ dataComponent }} id="{{ id }}" class="bg-{{ index.index0 }} gropsCards {{ separation }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %} 
		{% set cards = component.listsText.all() ?? null %}
		{% if cards %}
			<section class="row gy-3 row-cols-1 row-cols-md-2 row-cols-lg-3 mt-3">
				{% for card in cards %}
					<div class="my-lg-3 col">
						<section class="gropsCards__card mx-auto col-12 col-md-11 p-4 d-flex justify-content-center align-items-center flex-column">
							{{ card.text }}
						</section>
					</div>
				{% endfor %}
			</section>
		{% endif %}
	</div>
</section>