components/project/MediaGrid.tsx

import { MediaDetails } from '@/lib/fetch';
import MediaTile from './MediaTile';

export default function MediaGrid({
	mediaList,
}: {
	mediaList: MediaDetails[];
}) {
	return (
		<div className="relative size-full p-6 max-w-3xl mx-auto">
			<div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-4 [&>img:not(:first-child)]:mt-4">
				{mediaList.map(media => (
					<MediaTile key={media.id} media={media} />
				))}
			</div>
		</div>
	);
}