<a class="blog-post  flex flex-col shadow-xl rounded-xl bg-white" href="<?php the_permalink(); ?>">
    <div class="relative min-h-[200px] w-full"><img alt="Blog image 9565" loading="lazy" decoding="async"
            data-nimg="fill" class="bg-gray-200 object-cover  rounded-tl-xl rounded-tr-xl" sizes="100vw"
            src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium_large'); ?>"
            style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">
    </div>
    <div class="p-8 w-full ">
        <p class="text-xgate-blue text-sm mb-2"><?php echo get_the_author(); ?> •
            <?php echo get_the_date(); ?></p>
        <h2 class="text-2xl mb-2 "><?php the_title(); ?></h2>
        <div class="text-gray-700 text-base mb-4 ">
            <?php the_excerpt(); ?>
        </div>
        <div class="flex gap-2">
            <?php
                        $categories = get_the_category();
                        if ($categories) :
                            foreach ($categories as $category) :
                        ?>
            <div
                class="relative max-w-fit min-w-min inline-flex items-center justify-between box-border whitespace-nowrap px-1 h-7 text-small rounded-full bg-primary text-white">
                <span class="flex-1 text-inherit font-normal px-2"><?php echo esc_html($category->name); ?></span>
            </div>
            <?php
                            endforeach;
                        endif;
                        ?>
        </div>
    </div>
</a>