<div class="grid-container-full sg-color-palettes">
    <div class="grid-x">
        <h2>{{primary.title}}</h2>
    </div>
    {{#each primary.sets}}
    <div class="grid-x sg-buttons">
        <div class="cell medium-12">
            <h3>{{title}}</h3>
        </div>
        {{#each states}}
        <div class="cell medium-6 sg-bg-light">
            {{render "@cp-button-primary" this}}
        </div>
        <div class="cell medium-6 sg-bg-dark bg-inverted">
            {{render "@cp-button-primary" this}}
        </div>
        {{/each}}
    </div>
    {{/each}}
    <div class="grid-x">
        <h2>{{secondary.title}}</h2>
    </div>
    {{#each secondary.sets}}
    <div class="grid-x sg-buttons">
        <div class="cell medium-12">
            <h3>{{title}}</h3>
        </div>
        {{#each states}}
        <div class="cell medium-6 sg-bg-light">
            {{render "@cp-button-secondary" this}}
        </div>
        <div class="cell medium-6 sg-bg-dark bg-inverted">
            {{render "@cp-button-secondary" this}}
        </div>
        {{/each}}
    </div>
    {{/each}}
    <div class="grid-x">
        <h2>{{tertiary.title}}</h2>
    </div>
    {{#each tertiary.sets}}
    <div class="grid-x sg-buttons">
        <div class="cell medium-12">
            <h3>{{title}}</h3>
        </div>
        {{#each states}}
        <div class="cell medium-6 sg-bg-light">
            {{render "@cp-button-tertiary" this}}
        </div>
        <div class="cell medium-6 sg-bg-dark bg-inverted">
            {{render "@cp-button-tertiary" this}}
        </div>
        {{/each}}
    </div>
    {{/each}}
</div>