@props([
'image' => '',
'title' => '',
'description' => '',
'subject' => null,
'alt' => '',
'width' => null,
'height' => null,
])

<div {{ $attributes->merge(['class' => 'flex flex-col rounded-lg bg-glassmorphism']) }}>
    <div class="w-full h-full overflow-hidden aspect-6/5 rounded-lg">
        <img src="{{ asset($image) }}"
            alt="{{ $alt ?: strip_tags($title) }}"
            class="w-full h-full object-cover"
            @if($width) width="{{ $width }}" @endif
            @if($height) height="{{ $height }}" @endif
            style="mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);"
            loading="lazy">
    </div>
    <div class="p-2">
        @if($subject)
        <x-atoms.subject class="mb-2">{{ $subject }}</x-atoms.subject>
        @endif
        @if($title)
        <h3 class="text-2xl font-normal mb-2">{!! $title !!}</h3>
        @endif
        @if($description)
        <p class="text-sm text-muted-foreground leading-[--gold]">{!! $description !!}</p>
        @endif
    </div>
    {{ $slot }}
</div>