<div class="carousel offer-cards-carousel" data-module="offerCardsCarousel">
    {{#if title}}<h2 class="carousel__title cell">{{{title}}}</h2>{{/if}}
    <div class="carousel__track grid-x">
        <div class="carousel__bounds"></div>
        <div class="carousel__draggable"></div>
    </div>
    <div class="carousel__slider grid-x">
        {{#each horizontalCards}}
            <div class="carousel__slide cell spacer-md {{#ifEquals ../cardsPerSlide 2}}offer-cards-carousel--two-cards{{/ifEquals}}">
                {{{html}}}
            </div>
        {{/each}}
        <div class="carousel__slide cell spacer-md">
            <div class="offer-cards-carousel__endframe-container {{#if backgroundImage}}offer-cards-carousel__endframe--with-photo{{/if}}">
                <div class="offer-cards-carousel__endframe-image">
                {{#if backgroundImage}}{{> @cp-medium-image lowResolutionUrl=backgroundImage.lowResolutionUrl fallbackImageUrl=backgroundImage.fallbackImageUrl sources=backgroundImage.sources caption=backgroundImage.caption dynamicImage=dynamicImage forceLoad=backgroundImage.forceLoad}}{{/if}}
                </div>
                <div class="offer-cards-carousel__endframe-text-container">
                    {{#if endFrameTitle}}<p class="offer-cards-carousel__endframe-title">{{endFrameTitle}}</p>{{/if}}
                    {{#if cta}}<div class="offer-cards-carousel__endframe-cta">{{> @cp-button-primary cta }}</div>{{/if}}
                </div>
            </div>
        </div>
    </div>
</div>