{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div class="c-hero">
        <img
            class="c-hero__image"
            sizes="(max-width: 1920px) 100vw, 1920px"
            srcset="{neos.media:uri.image(image: node.properties.heroImage, maximumWidth: 1600)} 1600w,
                    {neos.media:uri.image(image: node.properties.heroImage, maximumWidth: 800)}  800w"
            src="{neos.media:uri.image(image: node.properties.heroImage)}"
            alt="{f:if(condition: '{node.properties.heroImage.caption}', then: node.properties.heroImage.caption, else: node.properties.heroImage.title)}"
            {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}
             />

        <f:if condition="{neos:rendering.inBackend()} || {heroTitle}">
            <div class="c-hero__text">
                {neos:contentElement.editable(property: 'heroTitle', tag: 'h2', class: 'c-hero__title')}
                <f:if condition="{neos:rendering.inBackend()} || {heroSubtitle}">
                    {neos:contentElement.editable(property: 'heroSubtitle', tag: 'p', class: 'c-hero__subtitle')}
                </f:if>
            </div>
        </f:if>

        <f:if condition="{heroDecoration}">
            <img src="{neos.media:uri.image(image: heroDecoration)}"
                 alt="{image.caption}"
                 class="c-hero__decoration" />
        </f:if>
    </div>
</neos:contentElement.wrap>