<div class="offset-tout-collection" data-module="offsetToutCollection" {{#if backgroundColour}}style="background-color:{{backgroundColour}}"{{/if}}>
    {{#if hasTopTear}}
        <div class="offset-tout-collection__tear offset-tout-collection__tear--top" {{#if backgroundColour}}style="fill:{{backgroundColour}}"{{/if}}>
            {{> @cp-offset-tout-tear}}
        </div>
    {{/if}}
    <div class="grid-container offset-tout-collection__title-container">
    {{#if titleSimpleImage}}
    <img class="offset-tout-collection__image-title" src="{{titleSimpleImage.src}}" alt="{{titleSimpleImage.altText}}">
    {{else}}
        {{#if title}}
        <h2 class="offset-tout-collection__title">{{{title}}}</h2>
        {{/if}}
    {{/if}}
    </div>
    <div class="offset-tout-collection__touts">
        <div class="grid-container">
            <div class="grid-x grid-margin-x offset-tout-collection__tout-grid-row">
            {{> @cp-offset-tout-collection-touts touts}}
            </div>
        </div>
    </div>
    <div class="offset-tout-collection__button-container bg-inverted">
        {{> @cp-button-secondary target=loadMoreButton.target text=loadMoreButton.text url="#" cssClasses="offset-tout-collection__load-more-button js-offset-tout-load-more" }}
        {{> @cp-button-secondary target=loadMoreButton.target text=showLessButton.text url="#" cssClasses="offset-tout-collection__show-less-button js-offset-tout-load-less"}}
    </div>
    {{#if hasBottomTear}}
        <div class="offset-tout-collection__tear offset-tout-collection__tear--bottom" {{#if backgroundColour}}style="fill:{{backgroundColour}}"{{/if}}>
            {{> @cp-offset-tout-tear}}
        </div>
    {{/if}}
</div>