{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" class="sustainabilityProgramInMexico bg-{{ index.index0 }} {{ separation }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %}

		<section class="row g-3 pt-4">
			<div class="col-12 col-lg-6 ">
				<section class="sustainabilityProgramInMexico__contentImg">
					{% 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 %}
				</section>
			</div>
			<div class="col-12 col-lg-6">
				{% if (component.description|length) > 0 %}
					<section class="sustainabilityProgramInMexico__description">
						{{ component.description }}
					</section>
				{% endif %}
				{% set listsText = component.listsText.all() ?? null %}
				{% if listsText %}
					{% include 'components/_listTextC' with {
            list: listsText
          } only %}
				{% endif %}
			</div>
		</section>
	</div>
</section>