<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-12 gap-{gap}">
            <div class="col-span-1">
                <f:for each="{children_1201}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1202}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1203}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1204}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1205}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1206}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1207}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1208}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1209}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1210}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1211}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="col-span-1">
                <f:for each="{children_1212}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
        </div>
    </div>
</section>

</html>
