<div class="row g-3 border-0 overflow-hidden flex-md-row mb-4  h-md-250 position-relative bg-white">
    <div class="col-12 col-lg-3 d-flex" style="height:100%;">
        <div class="align-self-center">
            <img class="img-fluid rounded-4 shadow" src="{{ $post->featured_image }}" alt="{{ $post->title }}">
        </div>

    </div>
    <div class="col-12 col-lg-9 d-flex flex-column position-static">
        @if (isset($category) && $category->id != $post->category?->id)
            <span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong
                    class="ms-0">{{ $category?->name }} <i class="bi bi-chevron-right small"></i>
                    {{ $post->category?->name }}</strong></span>
        @else
            <span class="d-inline-block mb-2 text-success-emphasis"><i>Under</i> <strong
                    class="ms-1">{{ $post->category->name }}</strong></span>
        @endif
        <h2 class="mb-1 h4 font-family-roboto-condensed">{{ $post->title }}</h2>
        <div class="mb-3 text-body-secondary">

            @if (!is_empty($post->published_at))
                {{ $post->published_at->format('M j') }}
            @endif

            <i class="bi bi-dot"></i>

            {{ markdown_min_read($post->body) }}

        </div>
        <p class="mb-3 small">{{ str_first_sentence($post->bites) }}</p>

        <a href="{{ route('front.post', ['slug' => $post->slug, 'category_slug' => $post->category?->slug]) }}"
            class="icon-link gap-1 icon-link-hover stretched-link">
            Continue reading...
            <svg class="bi">
                <use xlink:href="#chevron-right"></use>
            </svg>
        </a>
    </div>
</div>
