Refine nounstacle card styling

Author: sktbrd

src/components/nogglesrails/NounstacleDefinition.tsx

@@ -1,17 +1,17 @@
 export function NounstacleDefinition() {
   return (
-    <div className="mt-8 flex justify-center">
-      <div className="w-full max-w-4xl rounded-2xl border border-border/60 bg-gradient-to-b from-background to-muted/20 px-6 py-8 shadow-sm md:px-10 md:py-10">
-        <div className="space-y-6 text-foreground">
-          <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+    <section className="border-t py-12">
+      <article className="rounded-lg border bg-card p-6 text-card-foreground">
+        <div className="space-y-4 text-foreground">
+          <div className="flex flex-col gap-1 md:flex-row md:items-end md:justify-between">
             <div>
-              <h3 className="text-5xl font-semibold tracking-tight md:text-7xl">Nounstacle</h3>
-              <p className="mt-2 text-2xl italic text-muted-foreground md:text-3xl">’naun.sta.kal</p>
+              <h3 className="text-3xl font-semibold tracking-tight md:text-4xl">Nounstacle</h3>
+              <p className="mt-1 text-lg italic text-muted-foreground md:text-xl">’naun.sta.kal</p>
             </div>
-            <p className="text-2xl font-medium text-muted-foreground md:text-4xl">(noun)</p>
+            <p className="text-lg font-medium text-muted-foreground md:text-2xl">(noun)</p>
           </div>
 
-          <div className="space-y-5 text-lg leading-8 md:text-2xl md:leading-10">
+          <div className="space-y-4 text-sm leading-7 text-muted-foreground md:text-base">
             <p>
               <span className="font-semibold text-foreground">Definition:</span> A skateboarding
               obstacle, such as a rail or ramp, shaped like noggles, the iconic glasses symbol of
@@ -24,7 +24,7 @@ export function NounstacleDefinition() {
             </p>
           </div>
         </div>
-      </div>
-    </div>
+      </article>
+    </section>
   );
 }