<div id="fifteen-lock">
    <h1>{{general.label}}</h1>
    {{#if general.description}}<p class="notes">{{{general.description}}}</p>{{/if}}
        <div class="mosaic-container"
        style="grid-template-columns: repeat({{size}}, 1fr);grid-template-rows: repeat({{size}}, 1fr);">
        {{#each tiles as |tile|}}
        <div class="tile-container {{#unless tile.url}}empty{{/unless}}" data-order="{{tile.order}}"
            style="order: {{tile.order}}; width: calc( var(--mosaic-size) / {{../size}} ); height: calc( var(--mosaic-size) / {{../size}} );">
            <div class="mosaic-tile"
                style="background-image: url('{{tile.url}}'); transform: translate(-{{tile.xPercent}}%, -{{tile.yPercent}}%);">
            </div>
        </div>
        {{/each}}
    </div>
</div>