<div class="porthole-slide__background-overlay">
{{> @cp-medium-image responsiveImage}}
<div class="porthole-slide__overlay"></div>
</div>
<div class="porthole-slide__background">
{{> @cp-medium-image responsiveImage}}
</div>
<div class="porthole-slide__inner">
<div class="grid-container porthole-slide__grid-container">
<div class="porthole-slide__content grid-x grid-margin-x">
<div class="porthole-slide__intro cell medium-3">
{{#if brandSimpleImage}}
<div class="porthole-slide__brand" >
{{> @cp-medium-image sources=brandSimpleImage.sources alt=brandSimpleImage.alt originalSize=true}}
</div>
{{/if}}
<p class="porthole-slide__description">{{description}}</p>
{{> @cp-button-primary target="button.target" text=button.text url=button.url cssClasses="js-porthole-cta" modifier="with-icon"}}
</div>
<div class="porthole-slide__circle cell medium-6">
<a href="{{button.url}}" class="porthole-slide__cta js-porthole-cta" role="button">
<div class="porthole-slide__porthole">
{{#if fullVideo}}
{{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=false hideControls=true loop=true muted=true }}
{{else}}
{{> @cp-medium-image responsiveImage}}
{{/if}}
</div>
</a>
</div>
<div class="porthole-slide__media cell medium-3">
{{#if mapSimpleImage}}
<div class="porthole-slide__map" >
{{> @cp-medium-image sources=mapSimpleImage.sources alt=mapSimpleImage.alt originalSize=true}}
</div>
{{/if}}
</div>
</div>
</div>
{{#if layeredSimpleImage}}
<div class="porthole-slide__layered-image" >
{{> @cp-medium-image sources=layeredSimpleImage.sources alt=layeredSimpleImage.alt originalSize=true}}
</div>
{{/if}}
</div>