Update card component look.

src/components/card/card-container.tsx

@@ -1,5 +1,5 @@
 export const CardContainer = ({ children }: { children: React.ReactNode }) => (
-  <section className="justify-around gap-12 flex flex-wrap px-6">
+  <section className="justify-center gap-6 flex flex-wrap px-6">
     {children}
   </section>
 );

src/components/card/card.astro

@@ -13,28 +13,29 @@ export interface Props {
 const { title, subtitle, url, image } = Astro.props;
 ---
 
-<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] text-center">
+<div class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col">
   <a href={url} class="block">
     <div class="relative w-full mb-4">
       <Image
         src={image}
         width={600}
         height={375}
         alt=""
-        class="rounded-2xl aspect-[3/2] w-full"
+        class="rounded-xl aspect-[3/2] w-full"
         loading="lazy"
       />
     </div>
-    <h3 class="text-3xl font-bold mt-2 mb-4 text-primary">{title}</h3>
   </a>
-  <ButtonLink
-    url={url}
-    className="mb-4"
-    isExternal={false}
-  >
-    {subtitle}
-  </ButtonLink>
-  <p class="text-lg">
+  <div class="flex items-center flex-col flex-grow mb-2">
+    <a href={url} class="block hover:underline">
+      <h3 class="text-2xl text-primary">{title}</h3>
+    </a>
     <slot />
-  </p>
+  </div>
+  <a class="text-xs px-2 py-1 mt-4 bg-[#141F36] text-white rounded-[10px] inline-block w-fit mx-auto leading-4 hover:bg-button-hover not-prose mt-auto" href="{url}">
+    {subtitle}
+    <span class="inline-block ml-1 font-system text-lg leading-4">
+      ↗
+    </span>
+  </a>
 </div>