@props(['post' => $post])

<div class="relative  col-span-2 w-full hover:bg-gray-200 hover:scale-[102%] transition-all duration-300">
    <a href="{{ route('post', ['slug' => $post->slug , 'category' => $post->categories->first()->slug]) }}"
        class="w-full ">


        <img class="w-full aspect-video object-cover object-top" src="{{ asset('storage/'. $post->featured_image) }}"
            alt="">
        <div
            class="block sm:absolute sm:bottom-0 sm:bg-gradient-to-t sm:from-black sm:via-transparent  sm:to-transparent   sm:via-30% sm:to-100% w-full h-fit sm:h-full">
            <p
                class="font-bold text-black sm:text-white p-2 line-clamp-3 grid justify-start items-end h-full sm:text-xl ">
                <span class="">

                    <span class="text-{{isset($category->color) ? $category->color : 'red'}}-600">
                        {{$post->sub_title}} :

                    </span>
                    <span>

                        {{$post->title}}
                    </span>
                </span>
            </p>
        </div>
    </a>
</div>