{% set invert = component.invertContent ? 'flex-row-reverse' : '' %} 
{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="insabiWorks bg-{{ index.index0 }} {{ separation }}">
	<div class="container-fluid px-0">
		<section class="row {{ invert }}">
			<div class="col-12 col-lg-5">
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<div class="insabiWorks__img h-100">
						{% include 'components/_imageTransformsSimple' with {
              img: img,
              setClass: 'img-absolute',
              alt: img.title,
              transforms: {
                '(min-width: 1197px)': {
                  width: 750
                },
                '(min-width: 1196px)': {
                  width: 500,
                  height: 1300
                },
                '(min-width: 695px)': {
                  width: 710
                }
              },
              default: {
                width: 560
              }
            } %}
					</div>
				{% endif %}
			</div>
			<div class="col-12 col-lg-7 d-flex flex-column justify-content-center py-4">
				<section class="col-11 col-lg-8 {{
												          invert
												            ? ''
												            : 'mx-lg-0 ms-lg-4'
												          }} mx-auto ">
					{% include 'components/_setHeadTitles' with {
            stylesClass: 'text-start'
          } %}
					{% set list = component.listsText.all() ?? [] %}
					{% if list %}
						<ul class="mx-0 p-0 textAndListBlock__listText">
							{% for item in list %}
								<li class="textAndListBlock__listText--item mb-4">
									<p class="my-0 bullet me-2 pt-1">
										<img data-src="/assets/img/bullet.svg" src="" alt="bullet" loading="lazy" class="lazyload im-fluid"/>
									</p>
									<div class="descriptionList">
										{{ item.text }}
									</div>
								</li>
							{% endfor %}
						</ul>
					{% endif %}
					{% include 'components/_btnArrow' with {
            btn: component.itemLink,
            parentClass: 'd-inline-block'
          } only %}
				</section>
			</div>
		</section>
	</div>
</section>