@props(['category' => null])

<figure class="relative rounded-lg cursor-pointer h-80 flex-grow overflow-hidden" {{ $attributes }}>
    <a href="{{ route('category.show', $category) }}">
        <img class="max-h-full min-w-full align-bottom object-cover"
         src="{{ url($category->cover) }}" alt="{{ $category->name }} Cover">
        <figcaption class="absolute p-4 text-xl text-white font-bold uppercase top-1/2 bottom-0 bg-opacity-20 min-w-full bg-gradient-to-b from-transparent to-black flex flex-col-reverse">
            <span>{{ $category->name }}</span>
        </figcaption>
    </a>
</figure>