{namespace ep=EP\EpEvents\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="herounit herounit--indent {ep:sectionCssClass(sectionValue: offer.configuratorType)}">
    <f:spaceless>
        <f:if condition="{offer.imageHeader.uid}">
            <f:then>
                {f:uri.image(src: offer.imageHeader.uid, treatIdAsReference: 1, crop: offer.imageHeader.crop, width: '1440') -> v:variable.set(name: 'headerImage')}
            </f:then>
            <f:else>
                {v:variable.set(name: 'headerImage', value: 'https://placehold.it/1440x700')}
            </f:else>
        </f:if>
    </f:spaceless>
    <div class="herounit__image" style="background-image: url({headerImage})">
        <svg viewbox="0 0 900 700" preserveAspectRatio="xMinYMid" class="herounit__mask">
            <defs>
                <linearGradient id="gradient" class="section-default">
                    <stop id="gradient__from" offset="0" stop-opacity="0.5" />
                    <stop id="gradient__to" offset="1" stop-opacity="0.5" />
                </linearGradient>
            </defs>
            <polygon id="gradient__polygon" points="0,0 900,0 750,700 0,700" fill="url(#gradient)" />
        </svg>
        <div class="herounit__overlay">
            <div class="herounit__content">
                <h1 class="herounit__title"><span class="herounit__topline">Beispielangebot</span>{offer.name -> ep:softHyphen()}<br>{offer.location.name -> ep:softHyphen()}<span class="herounit__subtitle">{offer.headline}</span></h1>
                <div class="herounit__text">{offer.header -> f:format.html()}</div>
            </div>
        </div>
    </div>
</div>