Linked Image Card with Hover Shadow

<a href="#" class="group break-inside-avoid block overflow-hidden hover:shadow-xl hover:shadow-black/5 transition bg-white border-black/10 border rounded-2xl">
            <div class="relative">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/608f5480-5a5a-48f2-ba16-38b548c291c0_1600w.jpg" alt="Minimal desk" class="w-full h-96 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/10 via-transparent to-transparent pointer-events-none"></div>
            </div>
            <div class="sm:p-5 pt-4 pr-4 pb-4 pl-4">
              <div class="flex items-start justify-between gap-3">
                <div>
                  <p class="text-sm font-medium text-black">Yara Bank</p>
                  <p class="text-sm text-black/50">Web Experience</p>
                </div>
                <div class="shrink-0">
                  <span class="inline-flex items-center gap-1 text-xs text-black/60 group-hover:text-black transition">
                    Case study
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                  </span>
                </div>
              </div>
            </div>
          </a>