{{{customeditframe.editframeStart}}}
<div class="overview-hero-header" data-module="overviewHeroHeader" data-preload="true">
    <div class="overview-hero-header--mobile">
        <div class="overview-hero-header__top-section">
            <div class="grid-container overview-hero-header__grid-container">
                <div class="overview-hero-header__content grid-x">
                    <div class="cell small-10 medium-11">
                        <h1 class="overview-hero-header__title">{{title}}</h1>
                    </div>
                    <div class="cell small-2 medium-1">
                        {{#if likeButton}}
                        {{> @cp-hero-like-button likeButton}}
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="grid-container overview-hero-header__grid-container">
                <div class="grid-x">
                    <div class="cell">
                        {{> @cp-image-carousel-hero imageCarouselHero }}
                    </div>
                </div>
            </div>
            {{#if brandMark}}
            <div class="grid-container overview-hero-header__grid-container">
                <div class="grid-x">
                    <div class="cell">
                        <div class="overview-hero-header__brand-mark">
                            {{{brandMark.svg}}}
                        </div>
                    </div>
                </div>
            </div>
            {{/if}}
        </div>
        <div class="overview-hero-header__bottom-section">
            <div class="grid-container overview-hero-header__grid-container">
                <div class="overview-hero-header__content grid-x">
                    <div class="cell {{#if map}}small-8{{else}}small-12{{/if}}">
                        {{#if subtitle}}
                        <p class="overview-hero-header__subtitle">{{subtitle}}</p>
                        {{/if}}
                        <div class="medium">
                            <div class="js-body-container">
                                {{#if bodyText}}
                                <div class="overview-hero-header__body-text js-body-text">{{{bodyText}}}</div>
                                {{/if}}
                                {{#if cta}}
                                {{> @cp-overview-hero-header-cta cta}}
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    {{#if map}}
                    <div class="cell small-4">
                        <div class="overview-hero-header__map">
                            {{{map.svg}}}
                        </div>
                    </div>
                    {{/if}}
                    <div class="cell small--show">
                        <div class="js-body-container">
                            {{#if bodyText}}
                            <div class="overview-hero-header__body-text js-body-text">{{{bodyText}}}</div>
                            {{/if}}
                            {{#if cta}}
                            {{> @cp-overview-hero-header-cta cta}}
                            {{/if}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="overview-hero-header--desktop">
        <div class="overview-hero-header__top-section">
            <div class="grid-container overview-hero-header__grid-container overview-hero-header__title-container">
                <div class="overview-hero-header__content grid-x">
                    <div class="cell small-10 medium-8">
                        <h1 class="overview-hero-header__title">{{title}}</h1>
                    </div>
                    <div class="cell medium-2">
                        {{#if brandMark}}
                        <div class="overview-hero-header__brand-mark">
                            {{{brandMark.svg}}}
                        </div>
                        {{/if}}
                    </div>
                    <div class="cell small-2 medium-1">
                        {{#if likeButton}}
                        {{> @cp-hero-like-button likeButton}}
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="grid-container overview-hero-header__grid-container">
                <div class="grid-x">
                    <div class="cell">
                        {{> @cp-image-carousel-hero imageCarouselHero }}
                    </div>
                </div>
            </div>
        </div>
        <div class="overview-hero-header__bottom-section">
            <div class="grid-container overview-hero-header__grid-container">
                <div class="overview-hero-header__content grid-x">
                    <div class="cell {{#if map}}medium-8{{else}}medium-12{{/if}}">
                        {{#if subtitle}}
                        <p class="overview-hero-header__subtitle">{{subtitle}}</p>
                        {{/if}}
                        <div class="medium--show">
                            <div class="js-body-container">
                                {{#if bodyText}}
                                <div class="overview-hero-header__body-text js-body-text">{{{bodyText}}}</div>
                                {{/if}}
                                {{#if cta}}
                                {{> @cp-overview-hero-header-cta cta}}
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    {{#if map}}
                    <div class="cell medium-4">
                        <div class="overview-hero-header__map">
                            {{{map.svg}}}
                        </div>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>
{{{customeditframe.editframeStop}}}