{%- set text_first = {
	mobile: order.mobile == 'text-media',
	desktop: order.desktop == 'text-media',
} -%}

<div class="container-3xl gx-0 gx-3xl">
	<div class="row gx-0 align-items-end">
		<div class="col-12 col-lg-5 order-{{ text_first.mobile ? 2 : 1 }} order-lg-{{ text_first.desktop ? 2 : 1 }}">
			<div class="{{ text_first.desktop ? 'ms' : 'me' }}-lg-n70">
				{%- if not media_side.image.empty -%}
					{{ media_side.image.thumbnail('brick-' ~ brick.id).html({
						'disableAutoAlt': true,
						'alt': get_image_i18n_alt(media_side.image, ''),
						'pictureAttributes': {
							'class': 'w-100 h-100 d-block user-select-none pointer-events-none'
						},
						'imgAttributes': {
							'class': 'w-100 h-100 object-fit-cover lazyload',
							'width': '100%',
							'height': '100%',
						}
					}) | raw }}
				{%- endif -%}
			</div>
		</div>
		<div class="col-12 col-lg order-{{ text_first.mobile ? 1 : 2 }} order-lg-{{ text_first.desktop ? 1 : 2 }}">
			<div class="bg-{{ text_side.background_color }} position-relative">
				<div class="container gx-lg-0">
					<div class="coss coss-{{ text_first.desktop ? 'ps' : 'pe' }}-lg {{ text_first.desktop ? 'ps' : 'pe' }}-3xl-0">
						<div class="ses-py-1 ses-{{ text_first.desktop ? 'pe' : 'ps' }}-lg-1 ses-{{ text_first.desktop ? 'ps' : 'pe' }}-3xl-1">
							{{ pimcore_areablock('twoColumns1TextSideAreaBlock', {
								'globalParams': {
									'parentIndexes': parent_indexes
								},
								'allowed': [
									'advantages-badge',
									'cta',
									'display-heading',
									'divider',
									'heading',
									'icon-block',
									'rich-text',
									'spacer'
								]
							}) }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>