{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="gridTextAndLinkElement bg-{{ index.index0 }}  {{ separation }}" data-gtl-49123>
	<div class="{{component.fieldSwitch2 is same as(true) ? 'container-fluid py-3 px-0':'container py-3'}} gridTextAndLink">
		<section class="row g-3">
			<div class="col-12 col-lg-6">
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<div class="contentStycky">
						<section class="gridTextAndLink__img">
							{% 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
								}
							} only %}
						</section>
					</div>
				{% endif %}
			</div>

			<div class="col-12 col-lg-6 px-4 px-lg-5 d-flex flex-column justify-content-center">
				{% include 'components/_setHeadTitles' %}

				{% if (component.description|length) > 0 %}
					<section class="description mb-4">
						{{ component.description }}
					</section>
				{% endif %}
				<div class="gridTextAndLink__content {{component.fieldSwitch is same as(true) ? 'reverse-content'}}">
					{% set listsText = component.listsText.all() ?? null %}
					{% if listsText %}
						<ul class="px-0 py-3 m-0 gridTextAndLink__listText">
							{% for item in listsText %}
								<li class="gridTextAndLink__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="description">
										{{ item.text }}
									</div>
								</li>
							{% endfor %}
						</ul>
					{% endif %}
					{% set listsLinks = component.listsLinks.all() ?? null %}
					{% if listsLinks %}
						<ul class="px-0 {{component.fieldSwitch is same as(false) ? 'py-3'}} m-0 gridTextAndLink__listText">
							{% for link in listsLinks %}
							<li class="gridTextAndLink__listText--item">
								<p class="my-0 bullet me-2 pt-2">
									<img data-src="/assets/img/bullet.svg" src="" alt="bullet" loading="lazy" class="lazyload im-fluid"/>
								</p>
								{% include 'components/_btnArrow' with {
									btn: link.itemLink,
									bluecolor:true,
									classCustom: 'btnArrow_blue justify-content-start px-0',
									parentClass: 'd-inline-block'
								} only %}
							</li>
						    {% endfor %}
						</ul>
					{% endif %}
				</div>
			</div>
		</section>
	</div>
</section>