{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
{% import '_macros/_setTitles' as _set %}

<article id="{{ id }}" class="aboutInsabi bg-{{ index.index0 }} bg-{{ index.index0 }} {{ separation }}">
	<section class="container-fluid px-0">  
		<div class="row g-3">
			<section class="col-12 col-md-5 d-flex justify-content-center align-items-center flex-column">
				<div class="col-11 col-lg-9 ms-lg-auto">
					<h2 class="aboutInsabi__title text-center">
						{{ component.blockTitle }}
					</h2>
					<div class="aboutInsabi__description text-start">
						{{ component.description }}
					</div>
					<div class="col-12 col-lg-5">
						{% include 'components/_btnArrow' with {
              btn: component.linkBLock,
              classCustom: 'justify-content-lg-start'
            } only %}
					</div>
				</div>
			</section>
			<section class="col-12 col-md-7 aboutInsabi__grid ps-lg-5">
				{% if component.images.count() > 0 %}
					{% for item in component.images.all() %}
						<div class="aboutInsabi__grid--img">
							<img data-src="{{ item.getUrl('blockImageGrid') }}" src="" alt="{{ component.blockTitle }}" loading="lazy" class="lazyload img-fluid img-absolute"/>
						</div>
					{% endfor %}
				{% endif %}
			</section>
		</div>
	</section>
</article>