@foreach($popularPosts as $popularPost)
    <div class="popular-post d-flex align-items-start mt-15">
        <div class="popular-post-image rounded flex-shrink-0">
            @include('web.default.includes.premium.responsive_image', [
                'src' => $popularPost->image,
                'alt' => $popularPost->title,
                'class' => 'img-cover rounded',
                'width' => 96,
                'height' => 72,
                'loading' => 'lazy',
            ])
        </div>
        <div class="popular-post-content d-flex flex-column ml-10">
            <a href="{{ $popularPost->getUrl() }}">
                <h3 class="text-dark-blue font-14 font-weight-bold mb-0">{{ truncate($popularPost->title, 50) }}</h3>
            </a>
            <span class="mt-auto font-12 text-gray">{{ dateTimeFormat($popularPost->created_at, 'j M Y') }}</span>
        </div>
    </div>
@endforeach

<a href="/blog" class="btn btn-sm btn-primary btn-block mt-25">{{ trans('home.view_all') }} {{ trans('site.posts') }}</a>
