<div xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
    xmlns:nl="http://typo3.org/ns/NL/Sitepackage/ViewHelper"
>

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="textImage" label="Text & Image">
            <flux:form.option.group value="imageTextVideo"/>
            <flux:form.option.icon value="content-beside-text-img-below-center" />
            
            <!-- Choosing type of CE -->
            <flux:field.select name="contenttype" label="Type" default="1"
                items="{
                    1:{0:'Text (50) & Image (50)', 1:'1'},
                    2:{0:'Two Images & Text', 1:'2'},
                    3:{0:'Text (66) & Image (33)', 1:'3'},
                    4:{0:'Text & Image 33/66', 1:'4'},
                    5:{0:'big Image & Text', 1:'5'},
                    6:{0:'Two Columns', 1:'6'}
                }"
                requestUpdate="1"
            />
            <!-- Choosing type of CE -->

            <!-- Common fields -->
            <flux:field.input name="headline" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.headline"/>
            <flux:field.select name="headlineType" label="Headline Type" default="none" items="none,h1,h2,h3,h4"/>
            <flux:field.select name="headlineColor" label="Color" default="1" 
                items="{
                    1:{0:'Black',1:'1'},
                    2:{0:'Blue',1:'2'}
                }"
            />
            <flux:field.text name="text" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.text" enableRichText="1"/>
            <flux:field.inline.fal name="images" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.image" maxItems="1" allowedExtensions="png,jpg,jpeg,webp" collapseAll="true"/>

            <f:variable name="secondImagesLabel" value="Second Image"/>
            <f:if condition="{contenttype} == '6'">
                <f:variable name="secondImagesLabel" value="Image (2 col)"/>
            </f:if>
            <flux:field.inline.fal name="secondImages" displayCond="FIELD:contenttype:IN:2,6" label="{secondImagesLabel}" maxItems="1" allowedExtensions="png,jpg,jpeg,webp" collapseAll="true"/>
            <!-- Common fields -->

            <!-- Customized fields -->
            <f:switch expression="{contenttype}">
                <f:case value="1">
                    <flux:field.select name="position" label="Image & Text Orientation" default="1" 
                        items="{
                            1:{0:'Bottom',1:'1'},
                            2:{0:'Top',1:'2'},
                            3:{0:'Centered',1:'3'}
                        }"
                    />
                    <flux:field.input name="buttonText" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonText"/>
                    <flux:field type="input" name="buttonLink" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonLink" exclude="0" config="{renderType: 'inputLink'}" />
                    <flux:field.checkbox name="reverse" label="Reverse" default="0" />
                </f:case>
                <f:case value="2">
                    <flux:field.input name="buttonText" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonText"/>
                    <flux:field type="input" name="buttonLink" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonLink" exclude="0" config="{renderType: 'inputLink'}" />
                    <flux:field.checkbox name="reverse" label="Reverse" default="0" />
                </f:case>
                <f:case value="3">
                    <flux:field.input name="buttonText" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonText"/>
                    <flux:field type="input" name="buttonLink" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonLink" exclude="0" config="{renderType: 'inputLink'}" />                    
                    <flux:field.checkbox name="reverse" label="Reverse" default="0" />
                </f:case>
                <f:case value="4">
                    <flux:field.input name="buttonText" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonText"/>
                    <flux:field type="input" name="buttonLink" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonLink" exclude="0" config="{renderType: 'inputLink'}" />
                    <flux:field.checkbox name="reverse" label="Reverse" default="0" />
                </f:case>
                <f:case value="5">
                    <flux:field.input name="buttonText" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonText"/>
                    <flux:field type="input" name="buttonLink" label="LLL:EXT:sitepackage/Resources/Private/Language/locallang.xlf:flux.buttonLink" exclude="0" config="{renderType: 'inputLink'}" />
                </f:case>
                <f:case value="6">
                    <flux:field.input name="headline2" label="Headline (2 col)"/>
                    <flux:field.select name="headlineType2" label="Headline Type (2 col)" default="none" items="none,h1,h2,h3,h4"/>
                    <flux:field.select name="headlineColor2" label="Color (2 col)" default="1" 
                        items="{
                            1:{0:'Black',1:'1'},
                            2:{0:'Blue',1:'2'}
                        }"
                    />
                    <flux:field.text name="text2" label="Text (2 col)" enableRichText="1"/>
                    <flux:field.select name="whitespace" label="White Space" default="1" 
                        items="{
                            1:{0:'Big',1:'1'},
                            2:{0:'Small',1:'2'},
                            3:{0:'Smaller',1:'3'}
                        }"
                    />
                    <flux:field.select name="position" label="Image & Text Orientation" default="1" 
                        items="{
                            1:{0:'Bottom',1:'1'},
                            2:{0:'Top',1:'2'},
                            3:{0:'Centered',1:'3'}
                        }"
                    />
                    <flux:field.checkbox name="reverse" label="Reverse" default="0" />
                </f:case>
            </f:switch>
            <!-- Customized fields -->
            <f:render partial="Backend/Fields/Background" arguments="{_all}" />
        </flux:form>
    </f:section>


    <f:section name="Preview">
        <f:switch expression="{contenttype}">
            <f:case value="1"><strong>Text (50) & Image (50)</strong></f:case>
            <f:case value="2"><strong>Two Images & Text</strong></f:case>
            <f:case value="3"><strong>Text (66) & Image (33)</strong></f:case>
            <f:case value="4"><strong>Text (33) & Image (66)</strong></f:case>
            <f:case value="5"><strong>Big Image & Text</strong></f:case>
            <f:case value="6"><strong>Two Columns</strong></f:case>
        </f:switch>
    </f:section>

    <f:section name="Main">
        <!-- Defina variable image -->
        {v:content.resources.fal(field: 'images') -> v:iterator.first() -> v:variable.set(name: 'image')}
        {v:content.resources.fal(field: 'secondImages') -> v:iterator.first() -> v:variable.set(name: 'secondImage')}
        <!-- Defina variable image -->

        <!-- Defina variable position alignment -->
        <f:switch expression="{position}">
            <f:case value="1"><f:variable name="alignment" value="items-end"/></f:case>
            <f:case value="2"><f:variable name="alignment" value="items-start"/></f:case>
            <f:case value="3"><f:variable name="alignment" value="items-center"/></f:case>
        </f:switch>
        <!-- Defina variable position alignment -->

        <!-- Defina variable whitespace -->
        <f:switch expression="{whitespace}">
            <f:case value="1"><f:variable name="space" value="50%"/></f:case>
            <f:case value="2"><f:variable name="space" value="25%"/></f:case>
            <f:case value="3"><f:variable name="space" value="0"/></f:case>
        </f:switch>
        <!-- Defina variable whitespace -->

        <f:switch expression="{contenttype}">
            <f:defaultCase>
                <f:render section="TextImage-50/50" arguments="{_all}"/>
            </f:defaultCase>
            <f:case value="2">
                <f:render section="TwoImagesText" arguments="{_all}"/>
            </f:case>
            <f:case value="3">
                <f:render section="TextImage-66/33" arguments="{_all}"/>
            </f:case>
            <f:case value="4">
                <f:render section="TextImage-33/66" arguments="{_all}"/>
            </f:case>
            <f:case value="5">
                <f:render section="BigImage-Text" arguments="{_all}"/>
            </f:case>
            <f:case value="6">
                <f:render section="TwoColumns" arguments="{_all}"/>
            </f:case>
        </f:switch>
    </f:section>


    <!-- TextImage-50/50 -->
    <f:section name="TextImage-50/50">
        <f:if condition="{reverse} == 0">
            <f:then>
                <f:if condition="{headline}">
                    <!-- Heading Tablet / Mobile -->
                    <div class="container block lg:hidden">
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="md:offset-l-6 pl-2 font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html><{headlineType} class="md:offset-l-6 pl-2 font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                    </div>
                    <!-- Heading -->
                </f:if>
                <div class="lg:flex lg:gap-6 md:max-w-[692px] lg:max-w-[1248px] m-auto overflow-x-hidden md:overflow-x-visible">
                    <div class="md:flex w-full md:gap-4 lg:gap-6 pt-8 md:pt-4 lg:pt-0 {alignment}">
                        <f:if condition="{image}">
                            <!-- Image -->
                            <div class="-offset-l-1 mr-5 md:mr-0 md:w-7/12">
                                <picture>
                                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <f:image
                                        src="{image.id}"
                                        maxWidth="1440"
                                        fileExtension="webp"
                                        treatIdAsReference="1"
                                        crop="{image.crop}"
                                        alt="{image.alternative}"
                                        title="{image.title}"
                                        class="aspect-[4/3] object-cover"
                                        additionalAttributes="{loading:'lazy', sizes:'(max-width: 743px) 100vw, (max-width: 1439px) 768px, 1440px'}"
                                    />
                                </picture>
                            </div>
                            <!-- Image -->
                        </f:if>
                        <div class="md:w-6/12">
                            <f:if condition="{headline}">
                                <!-- Heading -->
                                    <f:if condition="{headlineType} == none">
                                        <f:then>
                                            <div class="hidden lg:block font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                        </f:then>
                                        <f:else>
                                            <f:format.html> <{headlineType} class="hidden lg:block font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                        </f:else>
                                    </f:if>
                                <!-- Heading -->
                            </f:if>
                            <div class="container md:mx-0 md:max-w-none">
                                <f:if condition="{text}">
                                    <!-- Text -->
                                    <div class="pt-8 md:pt-0 lg:pt-6 rte">
                                        <f:format.html>{text}</f:format.html>
                                    </div>
                                    <!-- Text -->
                                </f:if>
                                <f:if condition="{buttonLink}">
                                    <!-- CTA -->
                                    <div class="pt-4">
                                        <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                    </div>
                                    <!-- CTA -->
                                </f:if>
                            </div>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <f:if condition="{headline}">
                    <!-- Heading Tablet / Mobile -->
                    <div class="container block lg:hidden">
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="block lg:hidden md:offset-r-6 pr-2 font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html><{headlineType} class="block lg:hidden md:offset-r-6 pr-2 font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                    </div>
                    <!-- Heading -->
                </f:if>
                <div class="lg:flex lg:gap-6 md:max-w-[692px] lg:max-w-[1248px] m-auto overflow-x-hidden md:overflow-x-visible">
                    <div class="md:flex flex-row-reverse w-full md:gap-4 lg:gap-6 pt-8 md:pt-4 lg:pt-0 {alignment}">
                        <f:if condition="{image}">
                            <!-- Image -->
                            <div class="-offset-r-1 ml-5 md:ml-0 md:w-7/12">
                                <picture>
                                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <f:image
                                        src="{image.id}"
                                        maxWidth="1440"
                                        fileExtension="webp"
                                        treatIdAsReference="1"
                                        crop="{image.crop}"
                                        alt="{image.alternative}"
                                        title="{image.title}"
                                        class="aspect-[4/3] object-cover"
                                        additionalAttributes="{loading:'lazy'}"
                                    />
                                </picture>
                            </div>
                            <!-- Image -->
                        </f:if>
                        <div class="md:w-6/12">
                            <f:if condition="{headline}">
                                <!-- Heading -->
                                <f:if condition="{headlineType} == none">
                                    <f:then>
                                        <div class="hidden lg:block font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                    </f:then>
                                    <f:else>
                                        <f:format.html> <{headlineType} class="hidden lg:block font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                    </f:else>
                                </f:if>
                                <!-- Heading -->
                            </f:if>
                            <div class="container md:mx-0 md:max-w-none">
                                <f:if condition="{text}">
                                    <!-- Text -->
                                    <div class="pt-8 md:pt-0 lg:pt-6 rte">
                                        <f:format.html>{text}</f:format.html>
                                    </div>
                                    <!-- Text -->
                                </f:if>
                                <f:if condition="{buttonLink}">
                                    <!-- CTA -->
                                    <div class="pt-4">
                                        <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                    </div>
                                    <!-- CTA -->
                                </f:if>
                            </div>
                        </div>
                    </div>
                </div>
            </f:else>
        </f:if>
    </f:section>
    <!-- TextImage-50/50 -->


    <!-- TwoImagesText -->
    <f:section name="TwoImagesText">
        <f:if condition="{reverse} == 0">
            <f:then>
                <div class="container relative z-10">
                    <f:if condition="{headline}">
                        <!-- Headline -->
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="font-sub-head offset-r-2 md:mr-0 md:offset-l-4 lg:offset-l-5 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html> <{headlineType} class="font-sub-head offset-r-2 md:mr-0 md:offset-l-4 lg:offset-l-5 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                        <!-- Headline -->
                    </f:if>
                    <div class="lg:flex lg:gap-6 relative -top-[10px] md:-top-[14px] lg:-top-5 -z-10">
                        <!-- Images -->
                        <div class="lg:w-8/12">
                            <f:if condition="{image}">
                                <div class="offset-r-2 md:offset-r-3 lg:max-w-[612px] relative">
                                    <picture>
                                        <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <f:image
                                            src="{image.id}"
                                            maxWidth="1440"
                                            fileExtension="webp"
                                            treatIdAsReference="1"
                                            crop="{image.crop}"
                                            alt="{image.alternative}"
                                            title="{image.title}"
                                            class="aspect-[612/459] object-cover"
                                            additionalAttributes="{loading:'lazy'}"
                                        />
                                    </picture>
                                    <div class="blue-transparent absolute left-[20%] md:left-[118px] lg:left-[107px] w-full -bottom-3 md:-bottom-4 lg:-bottom-7 h-6 md:h-8 lg:h-14 after:content-none"></div>
                                </div>
                            </f:if>
                            <f:if condition="{secondImage}">
                                <div class="flex justify-end -mt-[60px] relative z-10">
                                    <div class="max-w-[136px] md:max-w-[338px] lg:max-w-[400px]">
                                        <picture>
                                            <source media="(min-width: 1024px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source media="(min-width: 768px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source media="(min-width: 425px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <f:image
                                                src="{secondImage.id}"
                                                maxWidth="1440"
                                                fileExtension="webp"
                                                treatIdAsReference="1"
                                                crop="{secondImage.crop}"
                                                alt="{secondImage.alternative}"
                                                title="{secondImage.title}"
                                                class="aspect-square object-cover"
                                                additionalAttributes="{loading:'lazy'}"
                                            />
                                        </picture>
                                    </div>
                                </div>
                            </f:if>
                        </div>
                        <!-- Images -->
                        <div class="offset-l-2 md:offset-r-2 lg:mx-0 lg:w-4/12 pt-4 md:pt-8 lg:pt-[247px]">
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-4 lg:pt-8">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <div class="container container relative z-10">
                    <f:if condition="{headline}">
                        <!-- Headline -->
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="font-sub-head offset-r-2 md:offset-l-2 lg:offset-l-5 lg:mr-0 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html> <{headlineType} class="font-sub-head offset-r-2 md:offset-l-2 lg:offset-l-5 lg:mr-0 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                        <!-- Headline -->
                    </f:if>
                    <div class="lg:flex lg:flex-row-reverse lg:gap-6 relative -top-[10px] md:-top-[14px] lg:-top-5 -z-10">
                        <!-- Images -->
                        <div class="lg:w-8/12">
                            <f:if condition="{image}">
                                <div class="offset-l-2 md:offset-l-3 lg:offset-r-2 lg:ml-0 lg:max-w-[612px] relative">
                                    <picture>
                                        <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <f:image
                                            src="{image.id}"
                                            maxWidth="1440"
                                            fileExtension="webp"
                                            treatIdAsReference="1"
                                            crop="{image.crop}"
                                            alt="{image.alternative}"
                                            title="{image.title}"
                                            class="aspect-[612/459] object-cover"
                                            additionalAttributes="{loading:'lazy'}"
                                        />
                                    </picture>
                                    <div class="blue-transparent absolute -left-[20%] md:-left-[118px] lg:left-[107px] w-full -bottom-3 md:-bottom-4 lg:-bottom-7 h-6 md:h-8 lg:h-14 after:content-none"></div>
                                </div>
                            </f:if>
                            <div class="lg:flex lg:justify-end -mt-[60px] relative z-10">
                                <f:if condition="{secondImage}">
                                    <div class="max-w-[136px] md:max-w-[338px] lg:max-w-[400px]">
                                        <picture>
                                            <source media="(min-width: 1024px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source media="(min-width: 768px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source media="(min-width: 425px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <source srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                            <f:image
                                                src="{secondImage.id}"
                                                maxWidth="1440"
                                                fileExtension="webp"
                                                treatIdAsReference="1"
                                                crop="{secondImage.crop}"
                                                alt="{secondImage.alternative}"
                                                title="{secondImage.title}"
                                                class="aspect-square object-cover"
                                                additionalAttributes="{loading:'lazy'}"
                                            />
                                        </picture>
                                    </div>
                                </f:if>
                            </div>
                        </div>
                        <!-- Images -->
                        <div class="offset-r-2 md:mr-0 md:offset-l-4 lg:mx-0 lg:w-4/12 pt-4 md:pt-8 lg:pt-[247px]">
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-4 lg:pt-8">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:else>
        </f:if>
    </f:section>
    <!-- TwoImagesText -->


    <!-- TextImage-66/33 -->
    <f:section name="TextImage-66/33">
        <f:if condition="{reverse} == 0">
            <f:then>
                <f:if condition="{headline}">
                    <!-- Headline -->
                    <div class="container -mb-4 md:-mb-7 lg:-mb-10">
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold md:offset-l-2 lg:offset-l-3 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html><{headlineType} class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold md:offset-l-2 lg:offset-l-3 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                    </div>
                    <!-- Headline -->
                </f:if>
                <div class="lg:flex lg:gap-6 md:max-w-[692px] lg:max-w-[1248px] m-auto overflow-x-hidden md:overflow-x-visible">
                    <f:if condition="{image}">
                        <!-- Images -->
                        <div class="w-full md:w-10/12 lg:w-8/12 relative -z-10">
                            <picture>
                                <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                <f:image
                                    src="{image.id}"
                                    maxWidth="1440"
                                    fileExtension="webp"
                                    treatIdAsReference="1"
                                    crop="{image.crop}"
                                    alt="{image.alternative}"
                                    title="{image.title}"
                                    class="aspect-[4/3] object-cover"
                                    additionalAttributes="{loading:'lazy'}"
                                />
                            </picture>
                            <div class="blue-transparent absolute right-0 -offset-r-1 md:left-0 md:mr-0 md:-offset-l-1 -bottom-3 md:-bottom-4 lg:-bottom-7 w-[186px] h-8 lg:w-[390px] lg:h-14 after:content-none"></div>
                        </div>
                        <!-- Images -->
                    </f:if>
                    <div class="lg:w-4/12 container md:mx-0 md:max-w-none">
                        <div class="offset-l-2 lg:ml-0 pt-8 lg:pt-[137px]">
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-6 md:pt-4">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <f:if condition="{headline}">
                    <!-- Headline -->
                    <div class="container -mb-4 md:-mb-7 lg:-mb-10">
                        <f:if condition="{headlineType} == none">
                            <f:then>
                                <div class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold lg:offset-l-2 lg:offset-r-1 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                            </f:then>
                            <f:else>
                                <f:format.html> <{headlineType} class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold lg:offset-l-2 lg:offset-r-1 {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                            </f:else>
                        </f:if>
                    </div>
                    <!-- Headline -->
                </f:if>
                <div class="lg:flex lg:gap-6 md:max-w-[692px] lg:max-w-[1248px] m-auto overflow-x-hidden md:overflow-x-visible">
                    <div class="lg:flex lg:flex-row-reverse lg:gap-6">
                        <f:if condition="{image}">
                            <!-- Images -->
                            <div class="w-full md:w-10/12 lg:w-8/12 md:offset-l-2 lg:ml-0 relative -z-10">
                                <picture>
                                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <f:image
                                        src="{image.id}"
                                        maxWidth="1440"
                                        fileExtension="webp"
                                        treatIdAsReference="1"
                                        crop="{image.crop}"
                                        alt="{image.alternative}"
                                        title="{image.title}"
                                        class="aspect-[4/3] object-cover"
                                        additionalAttributes="{loading:'lazy'}"
                                    />
                                </picture>
                                <div class="blue-transparent absolute right-0 -offset-r-1 -bottom-3 md:-bottom-4 lg:-bottom-7 w-[186px] h-8 lg:w-[390px] lg:h-14 after:content-none"></div>
                            </div>
                            <!-- Images -->
                        </f:if>
                        <div class="w-10/12 lg:w-4/12 lg:ml-0 pt-8 lg:pt-[137px] container md:mx-0 md:max-w-none">
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-6 md:pt-4">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:else>
        </f:if>
    </f:section>
    <!-- TextImage-66/33 -->


    <!-- TextImage-33/66 -->
    <f:section name="TextImage-33/66">
        <f:if condition="{reverse} == 0">
            <f:then>
                <div class="container">
                    <div class="md:flex md:gap-4 lg:gap-6">
                        <f:if condition="{image}">
                            <!-- Image -->
                            <div class="w-8/12 md:w-6/12 lg:w-4/12">
                                <picture>
                                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <f:image
                                        src="{image.id}"
                                        maxWidth="1440"
                                        fileExtension="webp"
                                        treatIdAsReference="1"
                                        crop="{image.crop}"
                                        alt="{image.alternative}"
                                        title="{image.title}"
                                        class="aspect-[4/3] object-cover"
                                        additionalAttributes="{loading:'lazy'}"
                                    />
                                </picture>
                            </div>
                            <!-- Image -->
                        </f:if>
                        <div class="offset-l-2 md:ml-0 md:w-5/12 lg:w-7/12 pt-8 md:pt-24">
                            <f:if condition="{headline}">
                                <!-- Headline -->
                                    <f:if condition="{headlineType} == none">
                                        <f:then>
                                            <div class="font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                        </f:then>
                                        <f:else>
                                            <f:format.html> <{headlineType} class="font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                        </f:else>
                                    </f:if>
                                <!-- Headline -->
                            </f:if>
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="pt-4 lg:pt-6 rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-6 md:pt-4">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <div class="container">
                    <div class="md:flex md:flex-row-reverse md:gap-4 lg:gap-6">
                        <f:if condition="{image}">
                            <!-- Image -->
                            <div class="offset-l-4 md:ml-0 md:w-6/12 lg:w-4/12">
                                <picture>
                                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                    <f:image
                                        src="{image.id}"
                                        maxWidth="1440"
                                        fileExtension="webp"
                                        treatIdAsReference="1"
                                        crop="{image.crop}"
                                        alt="{image.alternative}"
                                        title="{image.title}"
                                        class="aspect-[4/3] object-cover"
                                        additionalAttributes="{loading:'lazy'}"
                                    />
                                </picture>
                            </div>
                            <!-- Image -->
                        </f:if>
                        <div class="offset-r-2 md:mr-0 md:offset-l-1  md:w-5/12 lg:w-7/12 pt-8 md:pt-24">
                            <f:if condition="{headline}">
                                <!-- Headline -->
                                    <f:if condition="{headlineType} == none">
                                        <f:then>
                                            <div class="font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                        </f:then>
                                        <f:else>
                                            <f:format.html> <{headlineType} class="font-sub-head {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                        </f:else>
                                    </f:if>
                                <!-- Headline -->
                            </f:if>
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="pt-4 lg:pt-6 rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{buttonLink}">
                                <!-- CTA -->
                                <div class="pt-6 md:pt-4">
                                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                                </div>
                                <!-- CTA -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:else>
        </f:if>
    </f:section>
    <!-- TextImage-33/66 -->


    <!-- BigImage-Text -->
    <f:section name="BigImage-Text">
        <f:if condition="{headline}">
            <!-- Headline -->
            <div class="container -mb-4 md:-mb-7 lg:-mb-10">
                <f:if condition="{headlineType} == none">
                    <f:then>
                        <div class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                    </f:then>
                    <f:else>
                        <f:format.html> <{headlineType} class="text-[38px] leading-[42px] md:text-[72px] md:leading-[74px] lg:text-[100px] lg:leading-[105px] font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                    </f:else>
                </f:if>
            </div>
            <!-- Headline -->
        </f:if>
        <f:if condition="{image}">
            <!-- Image -->
            <div class="md:max-w-[768px] lg:max-w-[1440px] m-auto relative -z-10">
                <picture>
                    <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                    <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                    <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, quality:87, format:'webp', maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                    <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                    <f:image
                        src="{image.id}"
                        maxWidth="1440"
                        fileExtension="webp"
                        treatIdAsReference="1"
                        crop="{image.crop}"
                        alt="{image.alternative}"
                        title="{image.title}"
                        class="aspect-[4/3] object-cover"
                        additionalAttributes="{loading:'lazy'}"
                    />
                </picture>
                <div class="container relative">
                    <div class="blue-transparent absolute -bottom-3.5 md:-bottom-4 lg:-bottom-7 w-[112px] h-6 md:w-[220px] md:h-8 lg:w-[400px] lg:h-14 after:content-none"></div>
                </div>
            </div>
            <!-- Image -->
        </f:if>
        <div class="container pt-8 lg:pt-12">
            <f:if condition="{text}">
                <!-- Text -->
                <div class="offset-l-2 md:offset-l-5 rte">
                    <f:format.html>{text}</f:format.html>
                </div>
                <!-- Text -->
            </f:if>
            <f:if condition="{buttonLink}">
                <!-- CTA -->
                <div class="offset-l-2 md:offset-l-5 pt-6 md:pt-4">
                    <f:link.typolink parameter="{buttonLink}" class="btn-primary" title="{buttonText}">{buttonText}</f:link.typolink>
                </div>
                <!-- CTA -->
            </f:if>
        </div>
    </f:section>
    <!-- BigImage-Text -->

    <!-- TwoColumns -->
    <f:section name="TwoColumns">
        <f:if condition="{reverse} == 0">
            <f:then>
                <div class="container">
                    <div class="md:flex md:flex-row md:gap-6 {alignment}">
                        <div class="md:w-6/12 pb-[{space}]">
                            <f:if condition="{image}">
                                <!-- Image -->
                                <div>
                                    <picture>
                                        <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                        <f:image
                                            src="{image.id}"
                                            maxWidth="1440"
                                            fileExtension="webp"
                                            treatIdAsReference="1"
                                            crop="{image.crop}"
                                            alt="{image.alternative}"
                                            title="{image.title}"
                                            class="aspect-[4/3] object-cover"
                                            additionalAttributes="{loading:'lazy'}"
                                        />
                                    </picture>
                                </div>
                                <!-- Image -->
                            </f:if>
                            <f:if condition="{headline}">
                                <!-- Headline -->
                                <f:if condition="{headlineType} == none">
                                    <f:then>
                                        <div class="mt-8 lg:mt-12 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                    </f:then>
                                    <f:else>
                                        <f:format.html> <{headlineType} class="mt-8 lg:mt-12 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                    </f:else>
                                </f:if>
                                <!-- Headline -->
                            </f:if>
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="mt-4 rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                        </div>
                        
                        <div class="md:w-6/12 pt-8 md:pt-[{space}]">
                            <f:if condition="{headline2}">
                                <!-- Headline -->
                                <f:if condition="{headlineType2} == none">
                                    <f:then>
                                        <div class="text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor2} == 2', then: 'text-brand')}">{headline2}</div>
                                    </f:then>
                                    <f:else>
                                        <f:format.html> <{headlineType2} class="text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor2} == 2', then: 'text-brand')}">{headline2}</{headlineType2}></f:format.html>
                                    </f:else>
                                </f:if>
                                <!-- Headline -->
                            </f:if>
        
                            <f:if condition="{text2}">
                                <!-- Text -->
                                <div class="mt-4 rte">
                                    <f:format.html>{text2}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                            <f:if condition="{secondImage}">
                                <!-- Image -->
                                <div class="mt-8 lg:mt-12">
                                    <picture>
                                        <source media="(min-width: 1024px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source media="(min-width: 425px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <f:image
                                            src="{secondImage.id}"
                                            maxWidth="1440"
                                            fileExtension="webp"
                                            treatIdAsReference="1"
                                            crop="{secondImage.crop}"
                                            alt="{secondImage.alternative}"
                                            title="{secondImage.title}"
                                            class="aspect-[4/3] object-cover"
                                            additionalAttributes="{loading:'lazy'}"
                                        />
                                    </picture>
                                </div>
                                <!-- Image -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <div class="container">
                    <div class="md:flex md:flex-row-reverse md:gap-6 {alignment}">
                        <div class="md:w-6/12 pt-[{space}]">
                            <f:if condition="{image}">
                                <!-- Image -->
                                <div>
                                        <picture>
                                            <source media="(min-width: 1024px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                            <source media="(min-width: 768px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                            <source media="(min-width: 425px)" srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                            <source srcset="{v:uri.image(src:image.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: image.crop)}" type="image/webp">
                                            <f:image
                                                src="{image.id}"
                                                maxWidth="1440"
                                                fileExtension="webp"
                                                treatIdAsReference="1"
                                                crop="{image.crop}"
                                                alt="{image.alternative}"
                                                title="{image.title}"
                                                class="aspect-[4/3] object-cover"
                                                additionalAttributes="{loading:'lazy'}"
                                            />
                                        </picture>
                                </div>
                                <!-- Image -->
                            </f:if>
                            <f:if condition="{headline}">
                                <!-- Headline -->
                                <f:if condition="{headlineType} == none">
                                    <f:then>
                                        <div class="mt-8 lg:mt-12 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</div>
                                    </f:then>
                                    <f:else>
                                        <f:format.html> <{headlineType} class="mt-8 lg:mt-12 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor} == 2', then: 'text-brand')}">{headline}</{headlineType}></f:format.html>
                                    </f:else>
                                </f:if>
                                <!-- Headline -->
                            </f:if>
                            <f:if condition="{text}">
                                <!-- Text -->
                                <div class="mt-4 rte">
                                    <f:format.html>{text}</f:format.html>
                                </div>
                                <!-- Text -->
                            </f:if>
                        </div>
                        <div class="md:w-6/12 pt-0 md:pb-[{space}] flex flex-col-reverse md:block">
                            <div>
                                <f:if condition="{headline2}">
                                    <!-- Headline -->
                                    <f:if condition="{headlineType2} == none">
                                        <f:then>
                                            <div class="pt-8 md:pt-0 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor2} == 2', then: 'text-brand')}">{headline2}</div>
                                        </f:then>
                                        <f:else>
                                            <f:format.html> <{headlineType2} class="pt-8 md:pt-0 text-lg leading-[22px] md:text-[22px] md:leading-6 lg:text-[28px] lg:leading-8 font-bold {f:if(condition: '{headlineColor2} == 2', then: 'text-brand')}">{headline2}</{headlineType2}></f:format.html>
                                        </f:else>
                                    </f:if>
                                    <!-- Headline -->
                                </f:if>

                                <f:if condition="{text2}">
                                    <!-- Text -->
                                    <div class="mt-4 rte">
                                        <f:format.html>{text2}</f:format.html>
                                    </div>
                                    <!-- Text -->
                                </f:if>
                            </div>
                            <f:if condition="{secondImage}">
                                <!-- Image -->
                                <div class="mt-8 lg:mt-12">
                                    <picture>
                                        <source media="(min-width: 1024px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1440, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 1024, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source media="(min-width: 425px)" srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 768, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <source srcset="{v:uri.image(src:secondImage.id, format:'webp', quality:87, maxW: 425, treatIdAsReference:'1', crop: secondImage.crop)}" type="image/webp">
                                        <f:image
                                            src="{secondImage.id}"
                                            maxWidth="1440"
                                            fileExtension="webp"
                                            treatIdAsReference="1"
                                            crop="{secondImage.crop}"
                                            alt="{secondImage.alternative}"
                                            title="{secondImage.title}"
                                            class="aspect-[4/3] object-cover"
                                            additionalAttributes="{loading:'lazy'}"
                                        />
                                    </picture>
                                </div>
                                <!-- Image -->
                            </f:if>
                        </div>
                    </div>
                </div>
            </f:else>
        </f:if>
    </f:section>
    <!-- TwoColumns -->

</div>