refactor: enhance content card and layout with video handling and audio controls

- Added mute toggle for video content in content card.
- Integrated `AudioProvider` for global audio state management.
- Improved content card layout with dynamic aspect ratio support.
- Updated content list to use a masonry-style layout for better visual presentation.

frontend/src/components/content-list.tsx

@@ -70,9 +70,11 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	return (
 		<div className="max-w-7xl mx-auto py-8 px-4 space-y-8">
 			{title && <h1 className="text-2xl font-bold">{title}</h1>}
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+			<div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-6">
 				{contents.map((content) => (
-					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
+					<div key={content.id} className="break-inside-avoid mb-6">
+						<ContentCard content={content} onUpdate={fetchInitial} />
+					</div>
 				))}
 			</div>