{namespace m=MASK\Mask\ViewHelpers}
<!-- div class="pt-0 lg:pt-[100px] mb-[40px] lg:mb-[100px]"-->
<section class="gridContainer relative {data.tx_mask_tswi_teasers_background}{f:if(condition: '{data.tx_mask_tswi_teasers_background} == \'bgLightBlue\'', then: ' pt-0 lg:pt-[100px]')} paddingLeft paddingRight"> 
    <div class="relative lg:absolute top-0 right-0 bottom-0 lg:left-6/12 w-full lg:w-6/12">
        <f:if condition="{data.tx_mask_tswi_teasers_image}">
            <f:for each="{data.tx_mask_tswi_teasers_image}" as="file">
                <div class="absolute inset-0 hidden lg:block">
                    <div class="backStretch bg-contain bg-right-top bg-no-repeat h-full" data-src="{f:uri.image(src:file.uid, treatIdAsReference:1, width:'1920px', cropVariant:'default')}"></div>
                </div>
                <div class="relative h-0 pb-16/9 hidden md:block lg:hidden">
                    <div class="absolute inset-0">
                        <div class="backStretch bg-contain bg-right-bottom bg-no-repeat h-full" data-src="{f:uri.image(src:file.uid, treatIdAsReference:1, width:'1024px', cropVariant:'tablet')}"></div>
                    </div>
                </div>
                <div class="relative h-0 pb-16/9 block md:hidden">
                    <div class="absolute inset-0">
                        <div class="backStretch bg-contain bg-right-bottom bg-no-repeat h-full" data-src="{f:uri.image(src:file.uid, treatIdAsReference:1, width:'768px', cropVariant:'mobile')}"></div>
                    </div>
                </div>
            </f:for>
        </f:if>
    </div>
    <div class="container "> 
        <div class="row relative"> 
            <div class="col-md-10 col-lg-6">
                <h2 class="uppercase">
                    {data.tx_mask_tswi_headline -> f:format.nl2br()}
                </h2>
                <p class="leading-relaxed pb-24 text-3xl">
                    {data.tx_mask_tswi_teaser -> f:format.nl2br()}
                </p>
        
                <f:if condition="{data.tx_mask_tswi_teasers_teasers}">
                    <f:then>
                        <div class="row"> 
                            <f:for each="{data.tx_mask_tswi_teasers_teasers}" as="data_item" iteration="i">
                                <div class="col-md-10 col-lg-6 mb-12">
                                    <h3>
                                        <strong>
                                            <f:if condition="{data_item.tx_mask_tswi_teasers_teasers_headline_prefix} != ''">
                                                <span class="highlighttext">{data_item.tx_mask_tswi_teasers_teasers_headline_prefix}</span>
                                            </f:if> {data_item.tx_mask_tswi_teasers_teasers_headline -> f:format.nl2br()}
                                        </strong> 
                                    </h3>
                                    <p>
                                        {data_item.tx_mask_tswi_teasers_teasers_teaser -> f:format.nl2br()}
                                    </p>
                                    <f:if condition="{data_item.tx_mask_tswi_teasers_teasers_more}">
                                        <f:link.typolink parameter="{data_item.tx_mask_tswi_teasers_teasers_more}" class="arrowlink">
                                            {data_item.tx_mask_tswi_teasers_teasers_more_label}
                                        </f:link.typolink>
                                    </f:if>
                                </div>
                             
                                
                                <f:if condition="{i.cycle}%2 == 0">
                                    <f:then>
                                        </div><div class="row">
                                    </f:then>
                                </f:if>
                            </f:for>
                        </div>
                    </f:then>
                </f:if>

            </div>
        </div>
        <div class="row pb-24">
            <div class="col">
                <f:if condition="{data.tx_mask_tswi_teasers_more}">
                    <f:link.typolink parameter="{data.tx_mask_tswi_teasers_more}" class="buttonlink">
                        {data.tx_mask_tswi_teasers_more_label}
                    </f:link.typolink>
                </f:if>
            </div>
        </div>
       
    </div>
</section>

<section class="gridContainer relative {data.tx_mask_tswi_teasers_background}{f:if(condition: '{data.tx_mask_tswi_teasers_background} == \'bgLightBlue\'', then: ' mb-[40px] lg:mb-[100px]')} paddingLeft paddingRight paddingBottom">
    <div class="container"> 
        <div class="row">
            <div class="col col-md-10 offset-md-1">
                <f:if condition="{data.tx_mask_tswi_teasers_fact}">
                    <p class="text-center font-jaapokki-regular md:text-6xl text-4xl">
                        <span class="highlighttext leading-relaxed-1 pt-2">    
                            {data.tx_mask_tswi_teasers_fact -> f:format.nl2br()}
                        </span>
                    </p>
                </f:if>
            </div>
        </div>
    </div>
</section>