<div class="bg-body-bg shadow-md min-h-[clamp(423px,5vw,480px)] flex flex-col gap-[clamp(16px,2vw,24px)] justify-between   ">
        <!-- Top image -->
        <!-- Content container with proper spacing -->
        <div class="flex flex-col h-full gap-[clamp(16px,2vw,24px)]">
            <img src="{{imageurl}}" alt="{{title}}" class="w-full aspect-[3/2] object-cover ">
            <!-- Text content with margin-bottom -->
            <div class="flex flex-col gap-[clamp(8px,2vw,16px)] p-4">
                <h2 class=" text-2xl ">{{title}}</h2>
                <div class="text-body font-normal text-sm leading-height-normal xl:leading-height-loose xl:text-base">{{description}}</div>
            </div>
            <!-- Button container with absolute positioning fallback -->
        </div>
        <div class="mb-5 p-4">
            {{cta}}
        </div>
    </div>
