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

<div class="mask-hero-preview relative w-full h-32 bg-gradient-to-r from-gray-800 to-gray-600 flex items-center overflow-hidden text-white">
    <f:if condition="{data.tx_mask_hero_bg_image}">
        <div class="absolute inset-0 z-0">
            <f:for each="{data.tx_mask_hero_bg_image}" as="bgImage">
                <f:image image="{bgImage}" maxWidth="800" class="w-full h-full object-cover opacity-30" alt="" />
            </f:for>
        </div>
    </f:if>
    <div class="relative z-10 px-4">
        <f:if condition="{data.tx_mask_hero_title}">
            <h3 class="font-bold text-lg truncate">{data.tx_mask_hero_title}</h3>
        </f:if>
        <f:if condition="{data.tx_mask_hero_subtitle}">
            <p class="text-sm text-gray-200 truncate">{data.tx_mask_hero_subtitle}</p>
        </f:if>
    </div>
</div>

</html>
