<div class="iconBox-wrapper {if $contentPosition} iconBox-contentPosition__{$contentPosition} {/if}"
     style="
     --qui-iconBox-entryWidth: calc(100% / {$entriesPerLine});
     --qui-iconBox-imgIconSize: {$imgIconSize}px;
     --qui-iconBox-contentWidth: {$contentWidth}%;
">

    {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
    <header class="control-header">
        <h1>{$this->getAttribute('frontendTitle')}</h1>
    </header>
    {/if}

    {if $this->getAttribute('content') != ""}
    <div class="iconBox-content control-content default-content">
        {$this->getAttribute('content')}
    </div>
    {/if}

    <div class="iconBox-entries">
        {foreach $entries as $entry}

        <div class="iconBox-entry {if $centerContent} iconBox-entry__centerContent{/if}">

            {if $entry['image']}
            <div class="iconBox-entry-icon iconBox__iconSize-{$iconSize} {if $imgSquare} iconBox-entry__square{/if}">
                {image src=$entry['image'] loading="lazy"}
            </div>
            {/if}

            {if $entry['entryTitle']}
            <h3 class="iconBox-entry-title">{$entry['entryTitle']}</h3>
            {/if}

            {if $entry['entryContent']}
            <div class="iconBox-entry-content default-content">{$entry['entryContent']}</div>
            {/if}

        </div>

        {/foreach}
    </div>
</div>