<div class="offer-cards">
    <h3 class="spacer-sm">Horizontal Cards</h3>
    {{#each horizontalCards }}
        <section class="grid-x grid-margin-x grid-margin-y">
            <div clas s="cell medium-6 spacer-md">
                {{> @cp-offer-card-horizontal}}
            </div>
        </section>
    {{/each}}
    <h3 class="spacer-sm">Small Cards</h3>
    <section class="grid-x grid-margin-x">
        {{#each standardCards }}
            <div class="cell medium-3 spacer-md">
                {{> @cp-offer-card-standard hideTeaser=hideTeaser isSmall=true}}
            </div>
        {{/each}}
    </section>
    <h3 class="spacer-sm">Standard Cards</h3>
    <section class="grid-x grid-margin-x">
        {{#each standardCards }}
            <div class="cell medium-6 large-3 spacer-md">
                {{> @cp-offer-card-standard hideTeaser=hideTeaser}}
            </div>
        {{/each}}
    </section>
    <h3 class="spacer-sm">Featured Cards</h3>
    <section class="grid-x grid-margin-x">
        {{#each featuredCards }}
            <div class="cell medium-6 large-3 spacer-md">
                {{> @cp-offer-card-featured}}
            </div>
        {{/each}}
    </section>
</div>