{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="blidListLinkAndImage bg-{{ index.index0 }} {{ separation }}">
	<div class="container-fluid px-0">
		<section class="row">
			<div class="col-12 col-md-6 py-5 d-flex justify-content-center align-items-center flex-column">
				<section class="col-11 col-md-6">
					{% include 'components/_setHeadTitles' with {
            stylesClass: 'col-12 ' 
          } %}
					{% set links = component.listsLinks.all() ?? null %}
					{% if links %}
						<ul class="p-0 m-0">
							{% for btn in links %}
								<li class="d-inline-block py-2">
									{% include 'components/_btnArrow' with {
                    btn: btn.itemLink,
                    classCustom: 'justify-content-start'
                  } only %}
								</li>
								<br/>
							{% endfor %}
						</ul>
					{% endif %}
				</section>
			</div>
			<section class="col-12 col-md-6">
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<div class="blidListLinkAndImage__contentImg">
						{% 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 %}
					</div>
				{% endif %}
			</section>
		</section>
	</div>
</section>