<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="spacing-6 px-5">
	<div class="bido-container md:grid flex flex-col grid-cols-12 items-center justify-between gap-10">
		<f:if condition="{data.section_layout} == 'image_right'">
			<f:then>
				<!-- Image right: text column first in markup, then image -->
				<div class="w-full max-w-[540px] col-span-6">
					<f:if condition="{data.section_headline}">
						<h2 class="headline-2">
							<f:format.raw><f:format.nl2br>{data.section_headline}</f:format.nl2br></f:format.raw>
						</h2>
					</f:if>
					<f:if condition="{data.section_subheadline}">
						<h3 class="sub-headline-2">{data.section_subheadline}</h3>
					</f:if>
					<f:if condition="{data.section_text}">
						<p class="paragraph">
							<f:format.html>{data.section_text}</f:format.html>
						</p>
					</f:if>
					<f:if condition="{data.section_signature.0}">
						<f:image image="{data.section_signature.0}" alt="" class="mt-8 inline-block" loading="lazy" />
					</f:if>
				</div>
				<div class="col-span-6">
					<f:if condition="{data.section_image.0}">
						<div class="img w-full max-w-[540px]">
							<f:image image="{data.section_image.0}" alt="" class="w-full" loading="lazy" />
						</div>
					</f:if>
				</div>
			</f:then>
			<f:else>
				<!-- Image left (default): image first, then text -->
				<div class="col-span-6">
					<f:if condition="{data.section_image.0}">
						<div class="img w-full max-w-[540px]">
							<f:image image="{data.section_image.0}" alt="" class="w-full" loading="lazy" />
						</div>
					</f:if>
				</div>
				<div class="w-full max-w-[540px] col-span-6">
					<f:if condition="{data.section_headline}">
						<h2 class="headline-2">
							<f:format.raw><f:format.nl2br>{data.section_headline}</f:format.nl2br></f:format.raw>
						</h2>
					</f:if>
					<f:if condition="{data.section_subheadline}">
						<h3 class="sub-headline-2">{data.section_subheadline}</h3>
					</f:if>
					<f:if condition="{data.section_text}">
						<p class="paragraph">
							<f:format.html>{data.section_text}</f:format.html>
						</p>
					</f:if>
					<f:if condition="{data.section_signature.0}">
						<f:image image="{data.section_signature.0}" alt="" class="mt-8 inline-block" loading="lazy" />
					</f:if>
				</div>
			</f:else>
		</f:if>
	</div>
</div>

</html>
