<div class="homepage-hero-slide__inner {{#if modifier}}homepage-hero-slide__inner--{{modifier}}{{/if}} js-homepage-hero-slide {{#if @first}}active{{/if}}" data-index="{{@index}}">
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell {{#unless textNoWrap}}medium-10 medium-offset-1{{else}}medium-8 medium-offset-2{{/unless}}">
                <div class="homepage-hero-slide__content">
                    <div class="homepage-hero-slide__meta {{#unless eyebrow}}homepage-hero-slide__meta--icon-only{{/unless}}">
                        {{#if icon}}<div class="homepage-hero-slide__icon">{{{icon}}}</div>{{/if}}
                        {{#if eyebrow}}<p class="homepage-hero-slide__eyebrow">{{eyebrow}}</p>{{/if}}
                    </div>
                    <h1 class="homepage-hero-slide__title">{{title}}</h1>
                    {{#if modifier}}
                        {{#ifEquals modifier 'green-button' }}
                            {{> @cp-green-button target=button.target text=button.text url=button.url}}
                        {{/ifEquals}}
                        {{#ifEquals modifier 'fill-your-heart'}}
                            {{> @cp-heart-button target=button.target text=button.text url=button.url}}
                        {{/ifEquals}}
                    {{else}}
                        {{> @cp-button-primary target=button.target text=button.text url=button.url modifier="default"}}
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>