@props(['monogram', 'title'])

<div class="group bg-white border border-navy/[0.08] rounded-2xl p-7 flex flex-col gap-3.5 transition-all duration-200 hover:-translate-y-1 hover:shadow-lg hover:shadow-navy/10 hover:border-transparent">
    <div class="w-11 h-11 rounded-full bg-navy text-gold flex items-center justify-center font-black text-[13px] transition-colors group-hover:bg-gold group-hover:text-navy">
        {{ $monogram }}
    </div>
    <h3 class="font-extrabold text-lg m-0">{{ $title }}</h3>
    <p class="text-[15px] leading-relaxed text-navy/65 m-0">{{ $slot }}</p>
</div>