<div class="featured-stories-carousel">
    <div class="grid-x">
        <div class="cell medium-offset-1 medium-10 large-7">
            <div class="carousel carousel--featured-stories" data-module="featuredstoriescarousel">
                <template class="js-featured-stories-carousel-bg-template">
                    <div class="featured-stories-carousel__background"></div>
                </template>
                <div class="carousel__title-container">
                    {{#if title}}<h2 class="carousel__title">{{{title}}}</h2>{{/if}}
                    {{#if cards.length}}
                    <div class="carousel__buttons-container">
                        {{> @cp-button-tertiary url="#" disabled=true modifier="icon-only carousel__previous-button"}}
                        {{> @cp-button-tertiary url="#" disabled=true modifier="icon-only carousel__next-button"}}
                    </div>
                    {{/if}}
                </div>
                <div class="carousel__track">
                    <div class="carousel__bounds"></div>
                    <div class="carousel__draggable"></div>
                </div>
                <div class="carousel__slider grid-x">
                    {{#each cards}}
                    <div class="carousel__slide js-carousel-slide cell medium-6"
                        data-dominant-colour="{{this.responsiveImage.dominantColour}}">
                        {{> @cp-card-featured}}
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</div>