<div class="carousel carousel--featured-stories carousel--offer featured-stories-carousel"
    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="medium-offset-1">
                <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>
        </div>
    </div>
    <div class="grid-x">
        <div class="cell medium-offset-1 medium-10 large-5">
            <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>