@props([
    'card' => null,
    'description' => null,
    'thumbnail' => null,
    'title' => null,
    'date' => null,
    'link' => '#',
])
<div {{ $attributes->merge(['class' => 'card home-top my-2 '.$card]) }}>
    <div {{ $attributes->merge(['class' => 'ratio overflow-hidden']) }}>
        <img src="{{ asset($thumbnail) }}" class="card-img-top object-fit-cover" alt="thumbnail">
    </div>
    <div class="card-body p-2 post-desc">
        <a href="{{$link}}" class="card-title text-decoration-none h5 stretched-link">{{ $title }}</a>
        @if ($description != null)
        <p class="card-text mt-1">{!! $description !!}</p>
        @endif
    </div>
    @if ($date != null)
    <span class="d-flex flex-wrap flex-sm-row card-footer p-1 border-0 opacity-75">
        <span class="badge badge-primary">
            <i class='bx bx-calendar'></i> {{ $date }}
        </span>
    </span>
    @endif
</div>