website refactor

apps/website/components/media/MediaGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
 
 export interface MediaGridProps {
   children: React.ReactNode;
@@ -10,7 +10,7 @@ export interface MediaGridProps {
     lg?: number;
     xl?: number;
   };
-  gap?: 2 | 3 | 4 | 6 | 8;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
 }
 
 export function MediaGrid({
@@ -19,16 +19,13 @@ export function MediaGrid({
   gap = 4,
 }: MediaGridProps) {
   return (
-    <Box
-      display="grid"
-      responsiveGridCols={{
-        base: columns.base,
-        md: columns.md,
-        lg: columns.lg,
-      }}
-      gap={gap}
+    <Grid
+      cols={(columns.base ?? 1) as any}
+      mdCols={columns.md as any}
+      lgCols={columns.lg as any}
+      gap={gap as any}
     >
       {children}
-    </Box>
+    </Grid>
   );
 }