<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>