Add pagination and game cards to about page

src/routes/about/+page.svelte

@@ -5,9 +5,9 @@
 	import SectionNav from '#lib/components/ui/SectionNav.svelte';
 	import Section from '#lib/components/ui/Section.svelte';
 	import Panel from '#lib/components/ui/Panel.svelte';
-	import LinkButton from '#lib/components/ui/LinkButton.svelte';
 	import AnimeSection from '#lib/components/about/AnimeSection.svelte';
-	import MediaCard from '#lib/components/about/MediaCard.svelte';
+	import MediaGrid from '#lib/components/about/MediaGrid.svelte';
+	import GameCard from '#lib/components/about/GameCard.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -46,23 +46,16 @@
 	</Section>
 
 	<Section title="Games" id="games">
-		<div class="card-grid" data-image-group>
+		<div class="game-grid">
 			{#each about.games as game (game.name)}
-				<Panel title={game.name}>
-					<img class="game-image" src={game.image} alt={game.name} loading="lazy" />
-					<LinkButton href={game.url} icon="proicons:game">Play</LinkButton>
-				</Panel>
+				<GameCard {game} />
 			{/each}
 		</div>
 	</Section>
 
 	{#each mediaGroups as group (group.id)}
 		<Section title={group.title} id={group.id}>
-			<div class="media-grid">
-				{#each group.items as item (item.name)}
-					<MediaCard {item} details={data.mediaDetails[item.url]} kind={group.kind} />
-				{/each}
-			</div>
+			<MediaGrid items={group.items} mediaDetails={data.mediaDetails} kind={group.kind} />
 		</Section>
 	{/each}
 
@@ -78,21 +71,15 @@
 		margin: 0;
 	}
 
-	.media-grid {
+	.game-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 		gap: 1rem 0.85rem;
 	}
 
 	@container (max-width: 520px) {
-		.media-grid {
-			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		.game-grid {
+			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 		}
 	}
-
-	.game-image {
-		width: 100%;
-		aspect-ratio: 16 / 9;
-		object-fit: cover;
-	}
 </style>