loop.php

<div class="blog-item relative w-full">
   <a href="<?php the_permalink(); ?>" class="group">
      <div class="h-60 2xl:h-80 bg-black w-full rounded-xl relative overflow-hidden">
         <div class="absolute top-3 left-3 z-30 font-medium text-white/80">
            <h5 class="!text-white/80"><?php echo (string) YoastSEO()->meta->for_post( get_the_ID() )->estimated_reading_time_minutes, " min read"; ?></h5>
         </div>
         <div class="absolute inset-0">
            <img src="<?php the_post_thumbnail_url('thumbnail') ?>" class="w-full h-full object-cover group-hover:scale-105 group-hover:shadow-lg transition-all duration-500" alt="<?php the_title() ?>">
         </div>
      </div>
      <div class="pt-3">
         <h6 class="post-meta flex gap-x-2">
            <?php 
            // Optimized: Cache category data to avoid repeated queries
            $post_cats = get_the_category(); 
            if (!empty($post_cats)) {
               echo esc_html($post_cats[0]->cat_name); 
            }
            ?>
            <time datetime="<?php the_date('d.m.Y'); ?>" class="opacity-70">
               <?php echo get_the_date('d.m.Y'); ?>
            </time>
         </h6>
         <article class="mt-1">
            <h3><?php the_title(); ?></h3>
         </article>
      </div>
   </a>
</div>