<div class="compass-section{{#if @first}} is-active{{/if}} js-compass-section" data-show-location="{{showLocation}}" data-index="{{@index}}" {{#if isDefault}}data-is-default="true"{{/if}}>
    <div class="compass-section__background">
        {{#if backgroundResponsiveImage}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
        {{#if fullVideo}}
        {{> @cp-medium-video doNotInitialise=true video=fullVideo.video autoplay=false hideControls=true loop=true muted=true}}
        {{/if}}
    </div>
    <div class="compass-section__inner">
        <div class="compass-section__content">
            <div class="compass-section__content-inner js-compass-content">
                <div class="compass-section__icon">{{{icon}}}</div>
                <h2 class="compass-section__title">{{title}}</h2>
                {{#if subtitle}}<p class="compass-section__subtitle">{{subtitle}}</p>{{/if}}
                {{#if cta}}
                    {{> @cp-green-button url=cta.url target=cta.target text=cta.text modifier="small"}}
                {{/if}}
            </div>
        </div>
    </div>
</div>