<div class="container my-5">
    <div class="row pb-3">
        <div class="col-sm-12 d-flex justify-content-center">
            <h2 class="wln-text-purple"> Blog </h2>
        </div>
    </div>

    <div class="row">
        <?php foreach ($blog_posts as $post) { ?>
        <div class="col-md-4 col-sm-12 mb-5">
            <div class="card border-0 shadow-sm">
                <?php 
                    $image_result = $image_service->get($post->thumbnail);
                    $image = new Image(
                        $image_result['id'],
                        $image_result['caption'],
                        $image_result['filename']
                    ); 
                ?>
                <img src="assets/images/<?php echo $image->filename; ?>" class="card-img-top img-fluid" alt="<?php echo $image->caption; ?>">
                <div class="card-body">
                    <p> 
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <?php echo date_format(date_create($post->created_at), "M d, Y"); ?>
                    </p>
                    <a href="blog/<?php echo $post->url; ?>">
                        <h4 class="card-title wln-text-purple"> <?php echo $post->title; ?></h4>
                    </a>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
</div>