Match Rule card type and section gaps to the template grid.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/cards/Rule/Rule.view.tsx

@@ -108,10 +108,11 @@ export function RuleView({
   const showRecommendedTag = recommended && !expanded;
   const titleClass = templateGridFigmaShell
     ? `
-    max-[639px]:text-x-small-heading
-    min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:text-medium-heading
-    min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:text-x-large-heading
-    min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
+    font-bricolage-grotesque
+    max-[639px]:text-small-heading
+    min-[640px]:max-[767px]:text-x-large-heading
+    min-[768px]:max-[1023px]:text-small-heading
+    min-[1024px]:text-x-large-heading
   `
     : `
     max-[639px]:text-x-small-heading
@@ -120,15 +121,18 @@ export function RuleView({
     min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
   `;
 
-  const descriptionClass = isLarge
-    ? "text-large-label"
-    : isMedium
-      ? templateGridFigmaShell
-        ? "text-small-label min-[1024px]:max-[1439px]:text-large-label"
-        : "text-small-label"
-      : isSmall
-        ? "text-small-label" // S: 14px, medium, Inter
-        : "text-x-small-label"; // XS: 12px, medium, Inter
+  const descriptionClass = templateGridFigmaShell
+    ? `
+    max-[639px]:text-small-label max-[639px]:leading-[18px]
+    min-[640px]:max-[767px]:text-large-label
+    min-[768px]:max-[1023px]:text-small-label min-[768px]:max-[1023px]:leading-[18px]
+    min-[1024px]:text-large-label
+  `
+    : isLarge
+      ? "text-large-label"
+      : isExtraSmall
+        ? "text-x-small-label"
+        : "text-small-label";
 
   const headerIconCellClass = templateGridFigmaShell
     ? `