{{{customeditframe.editframeStart}}}
<div class="compass compass--celsius" data-module="compass" data-api-endpoint="{{compassApiEndpoint}}">
    <div class="compass__heading">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-5">
                    <h1 class="compass__title">{{{title}}}</h1>
                </div>
                <div class="cell medium-7">
                    <p class="compass__subtitle">{{{subtitle}}}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="compass__content">
        {{#if compassWheel}}
            <div class="compass__wheel-wrapper">
                {{> @cp-compass-wheel}}
            </div>
        {{/if}}
        {{#if compassSections}}
            {{#each compassSections}}
            {{> @cp-compass-section}}
            {{/each}}
        {{/if}}
        {{> @cp-compass-controls}}
    </div>
</div>
{{{customeditframe.editframeStop}}}