<article class="article-five">
  <figure class="position-relative mb-4">
    <a href="<?php the_permalink(); ?>">
      <img src="<?php if(get_the_post_thumbnail_url()): ?>
<?php the_post_thumbnail_url('full'); ?>
<?php else: ?>
<?php echo wc_placeholder_img_src(); ?>
<?php endif; ?>" alt="article" class="w-100 d-block radius-15" />
    </a>
    <ul class="position-absolute top-50 translate-middle-y">
      <li class="text-center">
        <?php
        $category = get_the_category(); 
        ?>
        <a href="<?php echo site_url('/category/') . $category[0]->slug; ?>" class="d-block"><?php
      echo $category[0]->cat_name;
      ?></a>
      </li>
      <li class="text-center"> <?php echo get_the_date(); ?></li>
    </ul>
  </figure>
  <h2>
    <a href="<?php the_permalink(); ?>"> <?php
$title = get_the_title();
if ( wp_is_mobile() ) {
    echo wp_trim_words( $title, 5, '...' );
} else {
    echo wp_trim_words( $title, 8, '...' );
}
?> </a>
  </h2>
  <p class="mb-0"> <?php echo get_the_excerpt(); ?></p>
</article>