<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:variable name="gap" value="{settings.gap}" />
<f:variable name="bgColor" value="{settings.backgroundColor}" />
<f:variable name="spacing" value="{settings.verticalSpacing}" />

<section class="{bgColor} {spacing}">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-11 gap-{gap}">
            <div class="col-span-1">
                <f:for each="{children_1101}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1102}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1103}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1104}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1105}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1106}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1107}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1108}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1109}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1110}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1111}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
        </div>
    </div>
</section>

</html>
