website refactor

apps/website/ui/Grid.tsx

@@ -17,6 +17,8 @@ export interface GridProps<T extends ElementType> extends BoxProps<T> {
   children?: ReactNode;
   cols?: number | ResponsiveValue<number>;
   gap?: number | string | ResponsiveValue<number | string>;
+  mdCols?: number;
+  lgCols?: number;
 }
 
 export const Grid = forwardRef(<T extends ElementType = 'div'>(
@@ -25,16 +27,22 @@ export const Grid = forwardRef(<T extends ElementType = 'div'>(
     cols = 1, 
     gap = 4,
     as,
+    mdCols,
+    lgCols,
     ...props
   }: GridProps<T>,
   ref: ForwardedRef<HTMLElement>
 ) => {
+  const finalCols = typeof cols === 'object' ? { ...cols } : { base: cols };
+  if (mdCols) finalCols.md = mdCols;
+  if (lgCols) finalCols.lg = lgCols;
+
   return (
     <Box 
       as={as} 
       ref={ref}
       display="grid"
-      gridCols={cols}
+      gridCols={finalCols}
       gap={gap}
       {...props}
     >