website refactor

apps/website/ui/GridItem.tsx

@@ -6,6 +6,8 @@ export interface GridItemProps<T extends ElementType> extends BoxProps<T> {
   children?: ReactNode;
   colSpan?: number | ResponsiveValue<number>;
   rowSpan?: number | ResponsiveValue<number>;
+  mdSpan?: number;
+  lgSpan?: number;
 }
 
 export const GridItem = forwardRef(<T extends ElementType = 'div'>(
@@ -14,15 +16,21 @@ export const GridItem = forwardRef(<T extends ElementType = 'div'>(
     colSpan,
     rowSpan,
     as,
+    mdSpan,
+    lgSpan,
     ...props
   }: GridItemProps<T>,
   ref: ForwardedRef<HTMLElement>
 ) => {
+  const finalColSpan = typeof colSpan === 'object' ? { ...colSpan } : { base: colSpan };
+  if (mdSpan) finalColSpan.md = mdSpan;
+  if (lgSpan) finalColSpan.lg = lgSpan;
+
   return (
     <Box 
       as={as} 
       ref={ref}
-      colSpan={colSpan}
+      colSpan={finalColSpan as any}
       // rowSpan is not directly supported by Box yet, but we can add it if needed
       // or use style
       {...props}