<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="grid-x">
        <div class="cell medium-12">
            <div class="carousel__title-container">
                <div class="carousel__heading">
                    {{#if title}}<h2 class="carousel__title">{{{title}}}</h2>{{/if}}
                    {{#if subtitle}}<p class="carousel__subtitle">{{{subtitle}}}</p>{{/if}}
                </div>
                {{#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>
    </div>
    <div class="grid-x">
        <div class="cell medium-8">
            <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>