fix: declare use-cases CardGrid at layout level

Author: wackerow

public/content/ai-agents/index.md

@@ -39,7 +39,7 @@ In contrast, Ethereum's decentralized ecosystem offers several key advantages:
 
 These factors transform AI agents from simple bots into dynamic, self-improving systems that offer significant value across multiple sectors:
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Automated DeFi" emoji=":money_with_wings:" description="AI agents keep a close eye on market trends, execute trades, and manage portfolios — making the complex world of DeFi a lot more approachable."/>
   <Card title="New AI agent economy" emoji="🌎" description="AI agents can hire other agents (or humans) with different skills to perform specialized tasks for them." />
   <Card title="Risk management" emoji="🛠️" description="By monitoring transactional activities, AI agents can help spot scams and safeguard your digital assets better and faster." />

public/content/payments/index.md

@@ -27,7 +27,7 @@ This isn't a far-off dream – it's happening today on Ethereum. While tradition
 
 For millions of people working abroad, sending money back home is a regular necessity. Traditional remittance services often come with high fees and slow processing times. Ethereum offers a compelling alternative.
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Cheaper Fees" emoji=":money_with_wings:" description="Remittance services charge up to $14 fees on average. Ethereum transactions can often be completed under $0.01."/>
   <Card title="Faster Transfers" emoji="📶" description="International wire transfers take several days to process. Ethereum transactions are settled in minutes." />
   <Card title="Open to anyone" emoji="🌎" description="You only need an internet connection and a wallet app to send or receive Ether." />

public/content/prediction-markets/index.md

@@ -30,7 +30,7 @@ In theory, because bettors stand to profit from being correct, prediction market
 
 Unlike traditional forecasting, blockchain-based prediction markets are:
 
-<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+<CardGrid>
   <Card title="Incentivized" emoji=":money_with_wings:" description="Participants stake real funds, which infers high-quality predictions."/>
   <Card title="Decentralization" emoji="🌎" description="Using blockchain and smart contracts ensures transparent and automated payouts." />
   <Card title="Market driven odds" emoji="🤝" description="Prices are set by traders buying and selling outcome shares, rather than preset by a centralized bookmaker." />

src/layouts/md/UseCases.tsx

@@ -18,8 +18,16 @@ import { ContentLayout } from "../ContentLayout"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
+const CardGrid = (props: ChildOnlyProp) => (
+  <div
+    className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8"
+    {...props}
+  />
+)
+
 // UseCases layout components
 export const useCasesComponents = {
+  CardGrid,
   AiAgentProductLists,
   BuildYourOwnAIAgent,
   PredictionMarketLists,