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

<div class="mask-card bg-white rounded-lg shadow-md overflow-hidden">
    <f:if condition="{data.tx_mask_card_image}">
        <div class="card-image">
            <f:for each="{data.tx_mask_card_image}" as="image">
                <f:image image="{image}" maxWidth="800" class="w-full h-52 object-cover" alt="{image.properties.alternative}" />
            </f:for>
        </div>
    </f:if>

    <div class="card-body p-6">
        <f:if condition="{data.tx_mask_card_title}">
            <h3 class="text-xl font-bold mb-3">{data.tx_mask_card_title}</h3>
        </f:if>

        <f:if condition="{data.tx_mask_card_text}">
            <div class="text-gray-600 mb-4">
                <f:format.html>{data.tx_mask_card_text}</f:format.html>
            </div>
        </f:if>

        <f:if condition="{data.tx_mask_card_link}">
            <f:link.typolink parameter="{data.tx_mask_card_link}" class="inline-block mt-2 text-primary font-semibold hover:underline">
                Read More →
            </f:link.typolink>
        </f:if>
    </div>
</div>

</html>
