{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="gridBorderlImgElement bg-{{ index.index0 }} {{ separation }} mt-3" data-gbli-10493>
	<div class="container-fluid gridBorderlImg py-lg-4 px-0">
		<section class="row g-3">
			<div class="col-12 col-md-7 d-flex justify-content-center align-items-center flex-column">
				<div class="col-11 col-lg-9 mx-auto ms-lg-auto me-lg-4 gridBorderlImg__description">
					{% include 'components/_setHeadTitles' with {
            stylesClass: 'text-lg-end' 
          } %}
					{% if (component.description|length) > 0 %}
						<section class="gridBorderlImg__description pb-3 pt-2 text-lg-end">
							{{ component.description }}
						</section>
					{% endif %}
					{% include 'components/_btnArrow' with {
            btn: component.itemLink,
            classCustom: 'justify-content-end px-0',
            parentClass: 'col-12 col-lg-4 ms-auto pb-3'
          } only %}
				</div>
			</div>
			<section class="col-12 col-md-5">
				<div class="contentStycky">
					<div class="gridBorderlImg__img">
						{% set img = component.image[0] ?? null %}
						{% if 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 %}
						{% endif %}
					</div>
				</div>
			</section>
		</section>
	</div>
</section>