                                    <div class="card border-0 shadow-lg" style="height:100%;">
                                        <div class="row g-0">
                                            <div class="col-5 p-3 m-auto">
                                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                                    class="text-decoration-none">
                                                    <div class="ratio ratio-16x9">
                                                        <div class="lqip-loader img-fluid rounded ">
                                                            <!-- Use the LQIP image with the appropriate URL -->
                                                            <img class="img-fluid" src="{{ $post->featured_image }}"
                                                                alt="Photo of {{ $post->name }}">

                                                            <!-- Use the final JPEG image with the appropriate URL -->
                                                            <img class="lqip-frozen img-fluid rounded "
                                                                src="{{ $post->featured_image_lqip }}"
                                                                alt="Placeholder image of {{ $post->name }}">
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-7">
                                                <div class="card-body d-flex justify-content-between flex-column"
                                                    style="height:100%;">
                                                    <div>
                                                        <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                                            class="text-decoration-none">
                                                            <p class="card-title fw-bold">{{ $post->title }}</p>
                                                        </a>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <p class="card-text mb-0">
                                                            <small>in </small>
                                                            @foreach ($post->post_categories as $post_category)
                                                                <small><a class="text-decoration-none"
                                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
                                                                </small>
                                                                @if (!$loop->last)
                                                                    ,
                                                                @endif
                                                            @endforeach
                                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
                                                        </p>
                                                        <small
                                                            class="text-body-secondary">{{ $post->publish_date->timezone(session()->get('timezone'))->format('j F Y') }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
