{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %} 
<section {{ dataComponent }} id="{{ id }}" class="sustainableProcurement bg-{{ index.index0 }}  {{ separation }}">
	<div class="container-fluid px-0"> 
		<section class="row">
			<div class="col-12 col-md-7 d-flex justify-content-center align-items-center flex-column">
				<div class="col-11 col-md-10 mx-auto ms-md-auto me-md-5 py-5">
					{% include 'components/_setHeadTitles' %}
					{% if (component.description|length) > 0 %}
						<section class="sustainableProcurement__description">
							{{ component.description }}
						</section>
					{% endif %}
				</div>
			</div>
			<div class="col-12 col-md-5">
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<section class="sustainableProcurement__contentImg">
						{% include 'components/_imageTransformsSimple' with {
              img: img,
              setClass: 'img-absolute',
              alt: component.blockTitle,
              transforms: {
                '(min-width: 992px)': {
                  width: 800
                },
                '(min-width: 768px)': {
                  width: 750
                },
                '(min-width: 576px)': {
                  width: 700
                },
                default: {
                  width: 480
                }
              }
            } only %}
					</section>
				{% endif %}
			</div>
		</section>
	</div>
</section>