card is bigger

src/lib/components/community/Card.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
 	import type { CommunityCard } from "$lib/type";
+  import Button from "$lib/components/Button.svelte";
+
 	import Reactions from "./reactions/Reactions.svelte";
 
   export let card: CommunityCard;
   </script>
 
 <div
-  class="cursor-pointer group bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
+  class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1] overflow-hidden"
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
     <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{card.image}?expose=true');"></div>
   </div>
-  <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 opacity-0 group-hover:opacity-100 w-full">
-    <p class="text-white font-semibold text-base">{card.prompt}</p>
-    <p class="text-white/75 font-regular text-sm">{card.model.id}</p>
+  <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
+    <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">
+      <p class="text-white font-semibold text-lg">{card.prompt}</p>
+      <p class="text-white/75 font-regular text-base">{card.model.id}</p>
+    </div>
+    <Button theme="light" size="md" href={`/generate?model=${card.model.id}`}>
+      Try it now
+    </Button>
   </div>
   <div class="flex items-center justify-start gap-2">
     <Reactions reactions={card.reactions} gallery_id={card.id} />

src/routes/gallery/+page.svelte

@@ -70,7 +70,7 @@
 	<div class="mt-5 max-w-sm">
 		<Input value={form.search} placeholder="Search an image" onChange={handleChangeSearch} />
 	</div>
-	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
+	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
 		{#each data.cards as card}
 			<Card card={card} />
 		{/each}