<f:if condition="{neos:rendering.inBackend()} || {introTitle -> vh:string.notEmpty()} || {introText -> vh:string.notEmpty()}">
    <neos:contentElement.wrap node="{node}">
        <section class="o-container o-container--sm">
            <div class="c-page-intro c-neos-text {f:if(condition: h1FontColorOverwrite, then: h1FontColorOverwrite, else: h1FontColor)} {h1FontFamilyOverwrite} {color}">
                <f:if condition="{customBorder} || {introIcon} && {headingType} != headingWithBackground">
                    <f:if condition="{customBorder}">
                        <f:then>
                            <div class="c-intro__custom-border">
                                <f:if condition="{customBorder.mediaType} == 'image/svg+xml'">
                                    <f:then>
                                        {vh:media.inline(image: customBorder) -> f:format.raw()}
                                    </f:then>
                                    <f:else>
                                        <noscript>
                                            <img src="{neos.media:uri.image(image: customBorder)}" class="c-intro__custom-border--centered"/>
                                        </noscript>
                                        <img data-src="{neos.media:uri.image(image: customBorder)}" class="lazyload c-intro__custom-border--centered" />
                                    </f:else>
                                </f:if>
                            </div>
                        </f:then>
                        <f:else>
                            <div class="c-intro__icon{f:if(condition: '{headingType} == headingWithIconBorder', then: ' c-intro__icon--with-border')}">
                                <f:if condition="{introIcon.mediaType} == 'image/svg+xml'">
                                    <f:then>
                                        {vh:media.inline(image: introIcon) -> f:format.raw()}
                                    </f:then>
                                    <f:else>
                                        <noscript>
                                            <img src="{neos.media:uri.image(image: introIcon, maximumWidth: 64)}" class="c-intro__icon--centered"/>
                                        </noscript>
                                            <img data-src="{neos.media:uri.image(image: introIcon, maximumWidth: 64)}" class="lazyload c-intro__icon--centered" />
                                    </f:else>
                                </f:if>
                            </div>
                        </f:else>
                    </f:if>
                </f:if>

                {neos:contentElement.editable(property: 'introTitle', tag: 'h1', class: 'c-page-intro__title')}
                {neos:contentElement.editable(property: 'introText', tag: 'p', class: 'c-page-intro__text')}
            </div>
        </section>
    </neos:contentElement.wrap>
</f:if>
