Update card look.

Author: nikoshell

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,28 @@ 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">
   <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}
-  >
+  <div class="flex flex-col items-start">
+    <a href={url} class="block hover:underline">
+      <h3 class="text-2xl text-primary">{title}</h3>
+    </a>
+      <slot />
+  </div>
+<a class="mt-2 text-xs px-2 py-1 bg-[#141F36] text-white rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose rounded-[5px]" href="{url}">
     {subtitle}
-  </ButtonLink>
-  <p class="text-lg">
-    <slot />
-  </p>
+ <span class="inline-block ml-1 font-system text-lg leading-4" >
+↗
+</span></a>
 </div>