<div class="hero-slide__background hero-slide__background--depth-field">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
<picture class="image__container">
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
</picture>
</figure>
</div>
<div class="hero-slide__layered-content js-layered-content">
<div class="hero-slide__layered-image hero-slide__layered-image--left"></div>
<div class="hero-slide__layered-image hero-slide__layered-image--right"></div>
</div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-10 medium-8 medium-offset-1 large-6 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow"></p>
<h1 class="hero-slide__title"></h1>
<p class="hero-slide__subtitle"></p>
</div>
</div>
</div>
</div>
</div>
<div class="hero-slide__background hero-slide__background--depth-field">
{{> @cp-medium-image backgroundResponsiveImage}}
</div>
<div class="hero-slide__layered-content js-layered-content">
<div class="hero-slide__layered-image hero-slide__layered-image--left"></div>
<div class="hero-slide__layered-image hero-slide__layered-image--right"></div>
</div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-10 medium-8 medium-offset-1 large-6 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow">{{eyebrow}}</p>
<h1 class="hero-slide__title">{{title}}</h1>
<p class="hero-slide__subtitle">{{subtitle}}</p>
{{> @cp-button-primary target=button.target text=button.text url=button.url modifier="with-icon" cssClasses="hero-slide__button"}}
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
There are no notes for this item.