Image Layouts

export default function Grid() {
	return (
		<section className="grid grid-cols-2 gap-6 md:grid-cols-3">
			{/* Row */}
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=1"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=2"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=3"
				alt=""
			/>
			{/* Row */}
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=4"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=5"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=6"
				alt=""
			/>
			{/* Row */}
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=7"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=8"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-48 w-48"
				src="https://picsum.photos/192/192?random=9"
				alt=""
			/>
		</section>
	);
}

export default function Quad() {
	return (
		<section className="grid grid-cols-2 gap-4">
			{/* Row */}
			<img
				className="bg-surface-500 rounded-container h-64 w-64"
				src="https://picsum.photos/256/256?random=1"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-64 w-64"
				src="https://picsum.photos/256/256?random=2"
				alt=""
			/>
			{/* Row */}
			<img
				className="bg-surface-500 rounded-container h-64 w-64"
				src="https://picsum.photos/256/256?random=3"
				alt=""
			/>
			<img
				className="bg-surface-500 rounded-container h-64 w-64"
				src="https://picsum.photos/256/256?random=4"
				alt=""
			/>
		</section>
	);
}

export default function Masonry() {
	return (
		<section className="grid grid-cols-2 gap-4 md:grid-cols-4">
			{/* Column */}
			<div className="grid gap-4">
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/320?random=1"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/120?random=2"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/280?random=3"
					alt=""
				/>
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/300?random=4"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/280?random=5"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/140?random=6"
					alt=""
				/>
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/280?random=7"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/320?random=8"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/140?random=9"
					alt=""
				/>
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/320?random=10"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/140?random=11"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container"
					src="https://picsum.photos/220/280?random=12"
					alt=""
				/>
			</div>
		</section>
	);
}

export default function Featured() {
	return (
		<section className="grid gap-4">
			{/* Featured */}
			<header>
				<img
					className="bg-surface-500 rounded-container h-auto max-w-full"
					src="https://picsum.photos/960/512?random=1"
					alt="Featured"
				/>
			</header>
			{/* Row */}
			<div className="grid grid-cols-5 gap-4">
				<img
					className="bg-surface-500 rounded-container h-full w-full"
					src="https://picsum.photos/200/200?random=2"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container h-full w-full"
					src="https://picsum.photos/200/200?random=3"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container h-full w-full"
					src="https://picsum.photos/200/200?random=4"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container h-full w-full"
					src="https://picsum.photos/200/200?random=5"
					alt=""
				/>
				<img
					className="bg-surface-500 rounded-container h-full w-full"
					src="https://picsum.photos/200/200?random=6"
					alt=""
				/>
			</div>
		</section>
	);
}