website refactor

apps/website/components/media/MediaGallery.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { MediaCard } from '@/ui/MediaCard';
 import { MediaFiltersBar } from './MediaFiltersBar';
 import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
 import { MediaViewerModal } from './MediaViewerModal';
 import { SectionHeader } from '@/ui/SectionHeader';
 import { EmptyState } from '@/ui/EmptyState';
@@ -63,7 +64,7 @@ export function MediaGallery({
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <Stack gap={6}>
       <SectionHeader
         title={title}
         description={description}
@@ -109,6 +110,6 @@ export function MediaGallery({
         onNext={handleNext}
         onPrev={handlePrev}
       />
-    </div>
+    </Stack>
   );
 }