whole card clickable

src/lib/components/models/Card.svelte

@@ -5,13 +5,14 @@
 
   export let card: ModelCard;
 </script>
-<div
+<a
+  href={`/generate?model=${card.id}`}
   class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
 >
   <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">
     <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.title}" />
     <div class="group-hover:opacity-100 opacity-0 translate-x-full group-hover:translate-x-0 transition-all duration-200 absolute right-3 bottom-3">
-      <Button theme="light" size="md" href={`/generate?model=${card.id}`}>
+      <Button theme="light" size="md">
         Try it now
       </Button>
     </div>
@@ -29,4 +30,4 @@
       </div>
     </div>
   </div>
-</div>
+</a>