dynamic sizing

src/routes/+layout.svelte

@@ -4,6 +4,6 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-4 my-8">
+<div class="mx-4 my-8 lg:mx-18 xl:mx-36 2xl:mx-52">
 	{@render children()}
 </div>

src/routes/JobCard.svelte

@@ -16,19 +16,19 @@
 
 <Card>
 	<div class="flex items-center gap-4">
-		<h2 class="mb-2 text-2xl tracking-tight">{title} @ {company}</h2>
+		<h2 class="mb-2 text-xl tracking-tight md:text-2xl">{title} @ {company}</h2>
-		<p class="text-sm text-slate-400">{start} - {end}</p>
+		<p class="text-xs text-slate-400 md:text-sm">{start} - {end}</p>
 	</div>
-	<h3 class="mt-6 text-2xl">Job Description</h3>
+	<h3 class="mt-6 text-xl md:text-2xl">Job Description</h3>
 	<p class="mt-4">
 		{jobDescription}
 	</p>
-	<h3 class="mt-6 text-2xl">Accomplishments</h3>
+	<h3 class="mt-6 text-xl md:text-2xl">Accomplishments</h3>
 	<ul class="mt-4 list-inside list-disc">
 		{#each accomplishments as accomplishment, i (i)}
-			<li class="mt-4 text-xl">
+			<li class="mt-4 md:text-xl">
-				<span>{accomplishment.title}</span>
+				<span class="underline md:no-underline">{accomplishment.title}</span>
-				<p class="ml-5 text-base">{accomplishment.description}</p>
+				<p class="mt-1 ml-4 text-base md:mt-2 md:ml-5">{accomplishment.description}</p>
 				<div class="mt-2 ml-5 flex gap-2">
 					{#each accomplishment.tags as tag, i (`${tag}-${i}`)}
 						<Badge>{tag}</Badge>

src/routes/PageHeader.svelte

@@ -9,8 +9,8 @@
 	<div class="flex justify-between">
 		<div class="my-4 flex flex-col justify-between gap-2">
 			<div>
-				<h1 class="text-4xl tracking-tight">Developer Resume For Christian Rannes</h1>
+				<h1 class="text-2xl tracking-tight md:text-4xl">Developer Resume For Christian Rannes</h1>
-				<h2 class="text-xl text-slate-400">
+				<h2 class="text-slate-400 md:text-xl">
 					Full Stack Developer Passionate about infrastructure, DevOps and Developer Experience
 				</h2>
 			</div>