Card

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

    <div class="overflow-hidden tu-border-width tu-border-radius tu-border-default tu-box-shadow">

        <figure class="w-full aspect-[16/9] overflow-hidden tu-bg-default">
            <img class="object-center object-cover w-full h-full hover:scale-110 duration-200"
                 src="../assets/img/placeholder-landscape-image.svg"
                 data-load-src="https://picsum.photos/id/1068/1920/1080"
                 alt="Example image"
                 loading="lazy">
        </figure>

        <div class="p-4">

            <h3 class="text-xl font-semibold mb-2">Card title</h3>

            <p>Card text example. This would be positioned below the image and title.</p>

        </div>

    </div>

    <div class="overflow-hidden tu-border-width tu-border-radius tu-border-default tu-box-shadow">

        <figure class="w-full aspect-[16/9] overflow-hidden tu-bg-default">
            <img class="object-center object-cover w-full h-full hover:scale-110 duration-200"
                 src="../assets/img/placeholder-landscape-image.svg"
                 data-load-src="https://picsum.photos/id/1068/1920/1080"
                 alt="Example image"
                 loading="lazy">
        </figure>

        <div class="p-4">

            <h3 class="text-xl font-semibold mb-2">Card title</h3>

            <p>Card text example. This would be positioned below the image and title.</p>

        </div>

    </div>

</div> <!-- /.grid -->