{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{backgroundImage}">
    <f:variable name="styleAttribute">style="background-image: url('{neos.media:uri.image(image: backgroundImage)}'); background-size: cover; background-position: center; padding: 4rem 0;"</f:variable>
    <f:variable name="parallaxClass">
        <f:if condition="{parallaxEffect}">o-container__parallax-effect</f:if>
    </f:variable>
</f:if>

<f:if condition="{decorationTop}">
    <div class="o-container__decoration-wrapper-top">
        <img src="{neos.media:uri.image(image: decorationTop)}" class="o-container__decoration" alt="Decoration">
    </div>
</f:if>

<section
    class="{backgroundColor} {marginTop} {highlightSectionFontColor} {parallaxClass}"
    aria-labelledby="section-title-{node.identifier}"
    {styleAttribute -> f:format.raw()}
>

    <span id="section-title-{node.identifier}" class="visually-hidden">{title}</span>
    {items -> f:format.raw()}

    <f:if condition="{decorationBottom}">
        <div class="o-container__decoration-wrapper-bottom">
            <img src="{neos.media:uri.image(image: decorationBottom)}" class="o-container__decoration" alt="Decoration Bottom">
        </div>
    </f:if>
</section>