{% set count_blocks = component.blocks.all() ?? null %}
{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="resultsGrid bg-{{ index.index0 }} {{ separation }}">
	<div class="container pb-5">
		{% include 'components/_setHeadTitles' %} 

		{% if count_blocks %}
			{% set border = (count_blocks|length) > 3 ? 'resultsGrid__border' : null
      %}
			{% set tp0 = count_blocks|slice(0, 3) %}
			{% set tp1 = count_blocks|slice(3, 6) %}
			{% if (tp0|length) > 0 %}
				<section class="row g-3 justify-content-center resultsGrid__blocks {{
						          border
						          }}">
					{% for i in tp0 %}
						<div class="col-12 col-md-6 col-lg-4 resultsGrid__blocks--items">
							{% if (i.itemTitle|length) > 0 %}
								<h3 class="titleBlock">
									{{ i.itemTitle|upper }}
								</h3>
							{% endif %}
							{% if (i.description|length) > 0 %}
								<section class="description">
									{{ i.description }}
								</section>
							{% endif %}
						</div>
					{% endfor %}
				</section>
			{% endif %}
			{% if (tp1|length) > 0 %}
				<section class="row g-3 pt-5 justify-content-center">
					{% for j in tp1 %}
						<div class="col-12 col-md-6 resultsGrid__blocks--items">
							{% if (j.itemTitle|length) > 0 %}
								<h3 class="titleBlock col-12 col-md-7">
									{{ j.itemTitle|upper }}
								</h3>
							{% endif %}
							{% if (j.description|length) > 0 %}
								<section class="description">
									{{ j.description }}
								</section>
							{% endif %}
						</div>
					{% endfor %}
				</section>
			{% endif %}
		{% endif %}
	</div>
</section>