                            <div class="card border-0 glow-{{ $loop->index + 1 }}" style="height:100%;">
                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                    class="text-decoration-none">
                                    <div class="card-img-top ratio ratio-16x9">
                                        <div class="lqip-loader">
                                            <!-- Use the LQIP image with the appropriate URL -->
                                            <img class="img-fluid rounded-top" src="{{ $post->featured_image }}"
                                                alt="Photo of {{ $post->name }}">

                                            <!-- Use the final JPEG image with the appropriate URL -->
                                            <img class="img-fluid lqip-frozen" src="{{ $post->featured_image_lqip }}"
                                                alt="Placeholder image of {{ $post->name }}">
                                        </div>

                                    </div>
                                </a>

                                <div class="card-body d-flex justify-content-between flex-column">

                                    <div class="mb-2">

                                        <p class="card-text fw-bold">
                                            <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
                                                class="text-decoration-none">{{ $post->title }}</a>
                                        </p>
                                    </div>
                                    @if (!is_empty($post->cliffhanger))
                                        <div class="mb-3">
                                            <small class="text-secondary">{{ $post->cliffhanger }}</small>
                                        </div>
                                    @else
                                        <div class="mb-3">
                                            <small
                                                class="text-secondary">{{ str_first_sentence($post->excerpt) }}</small>
                                        </div>
                                    @endif

                                    <div>
                                        <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>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small
                                                class="text-body-secondary">{{ $post->publish_date->timezone(session()->get('timezone'))->format('j F Y') }}</small>
                                            {{-- <small class="text-body-secondary">9 min read</small> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
