{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="bidContractedKeys  bg-{{ index.index0 }} {{ separation }}">
	<div class="container py-5">
		<section class="row">
			<div class="col-12 col-md-6">
				{% set img = component.image[0] ?? nul %}
				{% if img %}
					<section class="bidContractedKeys__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 %}
					</section>
				{% endif %}
			</div>
			<section class="col-12 col-md-6 px-5 d-flex justify-content-center flex-column">
				{% include 'components/_setHeadTitles' with {
          stylesClass: 'text-start'
        } %}
				{% if (component.description|length) > 0 %}
					<div class="bidContractedKeys__description">
						{{ component.description }}
					</div>
				{% endif %}
				{% include 'components/_btnArrow' with {
          btn: component.itemLink,
          classCustom: 'justify-content-start px-0',
          parentClass: 'd-inline-block'
        } only %}
			</section>
		</section>
	</div>
</section>