website refactor

apps/website/components/media/MediaGrid.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+export interface MediaGridProps {
+  children: React.ReactNode;
+  columns?: {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  gap?: 2 | 3 | 4 | 6 | 8;
+}
+
+export function MediaGrid({
+  children,
+  columns = { base: 1, sm: 2, md: 3, lg: 4 },
+  gap = 4,
+}: MediaGridProps) {
+  return (
+    <Box
+      display="grid"
+      responsiveGridCols={{
+        base: columns.base,
+        md: columns.md,
+        lg: columns.lg,
+      }}
+      gap={gap}
+    >
+      {children}
+    </Box>
+  );
+}