Difficulty Level Card with Hover Effects

<article class="relative overflow-hidden lg:rounded-3xl hover:border-green-400/50 transition-all min-h-[280px] flex flex-col bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/63154914-795c-48af-994b-a5f8130c77e1_800w.jpg)] bg-cover border-green-500/30 rounded-2xl shadow-xl backdrop-blur-lg">
        <div class="relative z-10 lg:p-8 flex flex-col h-full pt-6 pr-6 pb-6 pl-6 justify-between">
            <div class="flex mb-6 items-start justify-between">
                
                <span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-green-300/90 ring-1 ring-green-400/30 bg-green-500/15 backdrop-blur-sm">Difficulty</span>
            </div>
            <div class="text-center">
                <h3 class="text-3xl lg:text-4xl font-normal text-white tracking-tight font-bricolage mb-2">All Levels</h3>
                <p class="text-sm text-green-200/80">Beginner to Professional</p>
                <div class="flex justify-center gap-1 mt-3">
                    <div class="w-2 h-2 rounded-full bg-green-400"></div>
                    <div class="w-2 h-2 rounded-full bg-green-400"></div>
                    <div class="w-2 h-2 rounded-full bg-green-400"></div>
                    <div class="w-2 h-2 rounded-full bg-green-400/40"></div>
                </div>
            </div>
        </div>
    </article>