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

<f:asset.script identifier="iconify" src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js" />

<div class="spacing-6 px-5">
    <div class="bido-container content-template-1{f:if(condition: '{data.variant} == \'above\'', then: ' content-template-1--above')}{f:if(condition: data.icon_size, then: ' content-template-1--icon-')}{data.icon_size}">
        <f:if condition="{data.cards}">
            <f:then>
                <f:for each="{data.cards}" as="card">
                    <div>
                        <f:if condition="{card.link}">
                            <f:then>
                                <f:link.typolink parameter="{card.link}">
                                    <f:if condition="{card.icon_file.0}"><f:then><f:image image="{card.icon_file.0}" alt="" loading="lazy" /></f:then><f:else><f:if condition="{card.icon_iconify}"><iconify-icon icon="{card.icon_iconify}"></iconify-icon></f:if></f:else></f:if>
                                </f:link.typolink>
                            </f:then>
                            <f:else>
                                <a href="">
                                    <f:if condition="{card.icon_file.0}"><f:then><f:image image="{card.icon_file.0}" alt="" loading="lazy" /></f:then><f:else><f:if condition="{card.icon_iconify}"><iconify-icon icon="{card.icon_iconify}"></iconify-icon></f:if></f:else></f:if>
                                </a>
                            </f:else>
                        </f:if>
                        <div>
                            <f:if condition="{card.title}">
                                <f:if condition="{card.link}"><f:then><f:link.typolink parameter="{card.link}" class="{f:if(condition: data.title_style, then: data.title_style, else: 'sub-headline')} text-color-soft-black font-medium tracking-[2px] transition-all duration-300 block">{card.title}</f:link.typolink></f:then><f:else><a href="" class="{f:if(condition: data.title_style, then: data.title_style, else: 'sub-headline')} text-color-soft-black font-medium tracking-[2px] block">{card.title}</a></f:else></f:if>
                            </f:if>
                            <f:if condition="{card.description}">
                                <p class="{f:if(condition: data.description_style, then: data.description_style, else: 'paragraph')} mt-3"><f:format.raw><f:format.nl2br>{card.description}</f:format.nl2br></f:format.raw></p>
                            </f:if>
                        </div>
                    </div>
                </f:for>
            </f:then>
            <f:else>
                <div>
                    <a href=""><iconify-icon icon="mdi:pine-tree"></iconify-icon></a>
                    <div>
                        <a href="" class="{f:if(condition: data.title_style, then: data.title_style, else: 'sub-headline')} text-color-soft-black font-medium tracking-[2px] block">MATERIALS</a>
                        <p class="{f:if(condition: data.description_style, then: data.description_style, else: 'paragraph')} mt-3">Inspiration drawn from vintage mountaineering. We put a modern take on classic pieces.</p>
                    </div>
                </div>
            </f:else>
        </f:if>
    </div>
</div>

</html>
