
<!-- Item -->
<div class="col pb-3">
    <article class="card border-0 shadow-sm h-100">
        <div class="position-relative">
            <a href="<?= esc_url( get_permalink() )?>" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
            <!-- <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
            <i class="bx bx-bookmark"></i>
            </a> -->
            <img src="<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>" class="card-img-top" alt="<?php the_title(); ?>">
        </div>
        <div class="card-body pb-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
            <?php
                global $post;
                $categories = get_the_category($post->ID);
                if ($categories) {
                    $output = array();
                    foreach ($categories as $cat) {
                        $category_link = get_category_link($cat->cat_ID);
                        $output[] = '<a class="badge fs-sm text-nav bg-secondary text-decoration-none" href="'. $category_link .'">' .$cat->name .'</a>';
                    }
                    echo $match_classes =  join( ' ', $output );
                }
            ?>
            </div>
            <span class="fs-sm text-muted"><time datetime="<?php echo get_the_date('F j, Y'); ?>" title="<?php echo get_the_date('F j, Y'); ?>"><?php echo get_the_date('F j, Y'); ?></time></span>
            </div>
            <h3 class="h5 mb-0">
                <a href="<?= esc_url( get_permalink() )?>"><?php the_title(); ?></a>
            </h3>
        </div>
        <div class="card-footer py-4">
            <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none">
            <?php echo get_avatar( get_the_author_meta( 'ID' ) , 48, '', get_the_author(), $args = array('class' => array( 'rounded-circle me-3'))); ?>
            <?php echo get_the_author() ?>
            </a>
        </div>
    </article>
</div>
