@props([
    'image' => null,
    'title' => '',
    'description' => '',
    'contentType' => false,
    'theme' => 'light',
    'url' => '#',
])
<a href="{{ $url }}" {{ $attributes->class('block sm:flex gap-7 ' . ($theme==='dark'?'text-white':'')) }}>
    <div class="hidden sm:block max-w-[6.3rem] flex-none mx-auto">
        <div class="relative">
            <img class="w-full aspect-square" src="{{ $image }}" />
        </div>
    </div>

    <div class="flex-auto space-y-3">
        @if($contentType)
            <h4 class="text-pink text-sm font-semibold uppercase">{{ $contentType }}</h4>
        @endif
        <div class="space-y-3 lg:space-y-0 lg:flex justify-between gap-10">
            <h3 class="text-base sm:text-lg font-bold">{{ $title }}</h3>
            <div class="flex-none">{{ $context ?? '' }}</div>
        </div>

        <p class="text-sm sm:text-base">{!! $description !!}</p>
    </div>
</a>