feat: use flex layout

src/lib/components/site/projects/projects-item.svelte

@@ -8,7 +8,7 @@
 	let { logo, title, description, languages, license, year } = projectsItem;
 </script>
 
-<Card.Root class="hover:bg-muted/50">
+<Card.Root class="mb-6 inline-block hover:bg-muted/50">
 	<Card.Header class="grid grid-cols-[1fr_72px] items-start gap-4 space-y-0">
 		<div class="space-y-1">
 			<Card.Title tag="h2" class="mb-2">{title}</Card.Title>

src/lib/components/site/projects/projects.svelte

@@ -3,7 +3,7 @@
 	import projects from '$lib/content/projects';
 </script>
 
-<div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2">
+<div class="w-full columns-1 gap-6 md:columns-2">
 	{#each projects as project}
 		{#if project.url}
 			<a href={project.url} target="_blank">

src/routes/projects/+page.ts

@@ -2,7 +2,7 @@
 export function load() {
 	return {
 		name: `Projects`,
-		title: `Projects Ive realized`,
+		title: `Projects I've realized`,
 		subTitle: `Explore some of the projects I worked on in the past.`
 	};
 }