<div class="seq-slide seq-slide--{data.uid}">
    <div class="seq-slide--inner">
        <f:if condition="{data.tx_mask_slide_bgimg}">
            <sms:image image="{data.tx_mask_slide_bgimg.0}"
                       class="seq-slide--bgimg data-seq"
                       width="1920"
                       breakpoints="{
                       0: {'cropVariant': 'desktop', 'media': '(min-width: 1400px)', 'srcset': '1440, 1600, 1920, 2560, 3840', 'sizes':'100vw'},
                       1: {'cropVariant': 'tablet', 'media': '(min-width: 992px)','srcset': '1024, 1280, 1920, 2048, 2360, 2560', 'sizes':'100vw'},
                       2: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600', 'sizes':'100vw'}
                    }"/>
        </f:if>
        <f:if condition="{data.tx_mask_slide_actor}">
            <sms:image image="{data.tx_mask_slide_actor.0}" loading="auto" class="seq-slide--actor fadeRightBig data-seq"/>
        </f:if>
        <div class="seq-slide--content">
            <div class="seq-slide--content-inner">
                <f:if condition="{data.header}">
                    <div class="h1 fadeRightSmall">
                        {data.header -> f:format.raw()}
                    </div>
                </f:if>
                <f:if condition="{data.bodytext}">
                    <div class="intro fadeRightSmall">
                        {data.bodytext -> f:format.html()}
                    </div>
                </f:if>
                <f:if condition="{data.tx_mask_links}">
                    <div class="seq-slide--links">
                        <f:for each="{data.tx_mask_links}" as="data_item">
                            <f:if condition="{data_item.tx_mask_slide_link}">
                                <f:link.typolink parameter="{data_item.tx_mask_slide_link}" parts-as="parts" class="btn btn-inverse fadeRightSmall">
                                    {f:if(condition: parts.title, then: parts.title, else: "{f:translate(key: 'LLL:EXT:seragwiessner_sitepackage/Resources/Private/Language/locallang.xlf:readmore')}")} <i class="icon icon-right-open"></i>
                                </f:link.typolink>
                            </f:if>
                        </f:for>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</div>


<f:if condition="{data.tx_mask_slide_style}">
    <f:asset.css identifier="seq-slide{data.uid}-style" priority="true">
        <v:format.replace substring="currentSlide" replacement="seq-slide--{data.uid} .seq-slide--inner">{data.tx_mask_slide_style}</v:format.replace>
    </f:asset.css>
</f:if>
