Standardize claim cards with uniform layout and 5-column grid

Updated the claims library grid to show uniform cards and support up to 5 columns on larger screens for better content density.

Card changes:
- Replace varying description text with single-sentence featuredClaim (italic)
- Show actual atomic claims instead of keyPoints for consistency
- All cards now have same structure: tags → title → context → 5 claims → footer
- Updated search to filter by claims instead of keyPoints

Grid responsiveness:
- Mobile: 1 column
- md (768px+): 2 columns
- lg (1024px+): 3 columns
- xl (1280px+): 4 columns
- 2xl (1536px+): 5 columns

Result: Cards are now uniform height with consistent content structure, and grid scales up to 5 columns on ultra-wide displays.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/ClaimsLibrary.tsx

@@ -28,8 +28,8 @@ const ClaimsLibrary = () => {
       filtered = filtered.filter(
         (article) =>
           article.title.toLowerCase().includes(query) ||
-          article.description.toLowerCase().includes(query) ||
+          article.featuredClaim.toLowerCase().includes(query) ||
-          article.keyPoints.some((point) => point.toLowerCase().includes(query))
+          article.claims.some((claim) => claim.toLowerCase().includes(query))
       );
     }
 
@@ -99,7 +99,7 @@ const ClaimsLibrary = () => {
         )}
 
         {/* Grid Layout */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 mb-12">
           {filteredArticles.map((article) => (
             <article
               key={article.slug}
@@ -127,17 +127,17 @@ const ClaimsLibrary = () => {
                 </Link>
               </h3>
 
-              {/* Description */}
+              {/* Featured Claim - Single Sentence Context */}
-              <p className="text-sm text-muted-foreground mb-3">
+              <p className="text-sm text-muted-foreground mb-3 italic">
-                {article.description}
+                {article.featuredClaim}
               </p>
 
-              {/* Key Points */}
+              {/* Atomic Claims */}
               <ul className="space-y-1 mb-4 flex-1">
-                {article.keyPoints.map((point, idx) => (
+                {article.claims.map((claim, idx) => (
                   <li key={idx} className="text-xs text-muted-foreground flex items-start">
                     <span className="text-accent mr-1">•</span>
-                    <span>{point}</span>
+                    <span>{claim}</span>
                   </li>
                 ))}
               </ul>