<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">
        {{{customeditframe.editframeStart}}}
        <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>
        {{{customeditframe.editframeStop}}}
    </div>
</div>