<a href="<?php the_permalink(); ?>">
    <div
        class="flex flex-col justify-between relative h-[550px] w-full rounded-xl shadow-xl group text-black bg-white overflow-hidden">
        <div>
            <div
                class="relative h-[200px] w-full mb-8 transform transition-transform duration-300 group-hover:scale-110">
                <?php the_post_thumbnail('large', array('class' => 'object-cover', 'style' => 'position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent')); ?>
            </div>
            <h3 class="mb-3 group-hover:text-xgate-blue h4-styles text-ellipsis line-clamp-2 px-10">
                <?php the_title(); ?>
            </h3>
            <div class="text-ellipsis line-clamp-4 px-10"><?php the_excerpt(); ?></div>
        </div>
        <div class="flex items-center  transition-colors duration-300 px-10 pb-10" aria-label="Learn more"><span
                class="text-base opacity-1 mr-2 ">Learn
                more</span><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-arrow-right group-hover:text-xgate-blue duration-200">
                <path d="M5 12h14"></path>
                <path d="m12 5 7 7-7 7"></path>
            </svg></div>
    </div>
</a>