{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="gridGAndBlue bg-{{ index.index0 }} {{ separation }}">
	<div class="container-fluid px-0">
		<section class="row gx-0"> 
			<div class="col-12 col-md-5"> 
				{% set img = component.image[0] ?? null %}
				{% if img %}
					<section class="gridGAndBlue__img">
						{% include 'components/_imageTransformsSimple' with {
              img: img,
              setClass: 'img-absolute',
              alt: component.blockTitle,
              transforms: {
                '(min-width: 1197px)': {
                  width: 700,
                  height: 950
                },
                '(min-width: 1196px)': {
                  width: 500,
                  height: 1300
                },
                '(min-width: 695px)': {
                  width: 710
                }
              },
              default: {
                width: 560
              }
            } only %}
					</section>
				{% endif %}
			</div>
			<div class="col-12 col-md-7 d-flex flex-column">
				<section class="col-11 mx-auto mx-md-0 col-md-9 pt-2 ms-md-5">
					{% include 'components/_setHeadTitles' with {
            stylesClass: 'col-12 col-md-10 me-auto'
          } %}

					{% if component.listsText.count() > 0 %}
						{% include 'components/_listTextC' with {
              list: component.listsText.all()
            } only %}
					{% endif %}
				</section>
				<div class="gridGAndBlue__blockBlue mt-auto px-md-5">
					<section class="col-10 mx-auto mx-md-0 col-md-10 my-4">
						{{ component.blockBlue }}
					</section>
				</div>
			</div>
		</section>
	</div>
</section>