{{{customeditframe.editframeStart}}}
<div class="collage-hero" data-module="collageHero">
    <div class="collage-hero__hero-core">
        {{#if backgroundResponsiveImage}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
        <div class="collage-hero__overlay" {{#if backgroundResponsiveImage.dominantColour}}style="background: linear-gradient(180deg, rgba(0,0,0,0) 65%, {{backgroundResponsiveImage.dominantColour}})"{{/if}}></div>
        <div class="collage-hero__info">
            <div class="grid-container">
                <div class="grid-x">
                    <div class="cell medium-10 large-8">
                        {{#if title}}<h1 class="collage-hero__title">{{{title}}}</h1>{{/if}}
                        {{#if subtitle}}<p class="collage-hero__subtitle">{{{subtitle}}}</p>{{/if}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="collage-hero__collage" {{#if backgroundResponsiveImage.dominantColour}}style="background-color: {{backgroundResponsiveImage.dominantColour}}"{{/if}}>
        <div class="grid-container">
            {{> @cp-collage-elements}}
        </div>
    </div>
</div>
{{{customeditframe.editframeStop}}}