{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
{% set orderGrid = ['order-0', 'order-1'] %}
{% set orderGrid = component.invertContent ? orderGrid|reverse : orderGrid %}
{% set gridsImageOrText = component.gridsImageOrText.all() ?? [] %}

{# dd component.backgroudColor #} 
<section {{ dataComponent ?? null }} id="{{ id }}" class="gridAndText bg-{{ index.index0 }} {{ separation }} " data-g-8585>
	<div class="container gridAndTextComponent py-3">
		<section class="row">
			{% if (gridsImageOrText|length) > 0 %}
				{% for _block in gridsImageOrText %}
					{% set set_parameters = {
            columns: _block.cols[0].slug ?? null,
            orderGrid: orderGrid[loop.index0]
          } %}

					{% if _block.type == 'image' %}
						{% set set_parameters =
              set_parameters|merge({
                image: _block.imagen[0] ?? null,
                notTransform: component.fieldSwitch
              })
            %}
					{% else %}
						{% set set_parameters =
              set_parameters|merge({
                titles: [
                  {
                    value: _block.blockTitle
                  },
                  {
                    value: _block.subtitle,
                    type: 'h3'
                  }
                ],
                align: component.alignText,
                invert: component.invertContent,
                description: _block.description ?? null,
                link: _block.itemLink
              })
            %}
					{% endif %}

					{% include 'components/_gridImageAndText-'
            ~ _block.type with set_parameters only %}
				{% endfor %}
			{% endif %}
		</section>
	</div>
</section>