@props(
['title', 'slug', 'featured_image']
)


<a href="{{url('blog/'.$slug)}}" class="col-lg-4">
    <div class="bc d-flex flex-column justify-content-end position-relative overflow-hidden">

        @if(is_null($featured_image))
        <img width="300" height="200" src="{{url('storage/blog-images/placeholder.webp')}}" class="position-absolute h-100 w-100 start-0 top-0 object-fit-cover wp-post-image" alt="" decoding="async" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px">
        @else
        <img width="300" height="200" src="{{url('storage/'.$featured_image)}}" class="position-absolute h-100 w-100 start-0 top-0 object-fit-cover wp-post-image" alt="" decoding="async" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px">
        @endif
        <div class="bcb z-3 position-relative p-3 m-3 text-white">
            <h5 class="m-0">{{$title}}</h5>
        </div>
    </div>
</a>