{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="gridTextHexagon bg-{{ index.index0 }} {{ separation }}">
	<div class="container pt-4">
		{% include 'components/_setHeadTitles' %}
		<section class="row">
			{% if
        (component.description|length) > 0
          or not component.itemLink.isEmpty() %}
				<div class="col-12 col-lg-7 d-flex justify-content-center flex-column">
					{% if (component.description|length) > 0 %}
						<section class="gridTextHexagon__description text-start">
							{{ component.description }}
						</section>
					{% endif %}
					{% include 'components/_btnArrow' with {
            btn: component.itemLink,
            classCustom: 'justify-content-start',
            parentClass: 'd-inline-block mb-4 mb-md-0'
          } only %}
				</div>
			{% endif %}

			{% set img = component.image[0] ?? null %}
			{% if img %}
				<div class="col-12 col-lg-5 d-flex justify-content-center align-items-center flex-column">
					{% include 'components/_imageTransformsSimple' with {
            img: img,
            setClass: '',
            alt: component.blockTitle,
            transforms: {
              '(min-width: 992px)': {
                width: 600
              },
              '(min-width: 768px)': {
                width: 5024
              }
            },
            default: {
              width: 480
            }
          } only %}
				</div>
			{% endif %}
		</section>
	</div>
</section>