Rework hero component for better layout across viewport sizes

src/components/Hero.astro

@@ -3,15 +3,18 @@ import houstonOmg from '../assets/houston_omg.webp';
 ---
 
 <section class="flex flex-col items-center gap-16 py-16 lg:flex-row" aria-labelledby="hero-heading">
-	<h2 class="heading-2 text-center text-5xl/tight sm:text-6xl/tight lg:text-left" id="hero-heading">
+	<h2
+		class="heading-2 text-pretty text-center text-5xl/tight sm:text-6xl/tight lg:max-w-lg lg:text-left"
+		id="hero-heading"
+	>
 		It’s go time with Astro
 	</h2>
-	<div class="rounded-md bg-blue-purple-gradient p-px">
+	<div class="w-[640px] max-w-full rounded-md bg-blue-purple-gradient p-px shadow-md @container">
 		<section
-			class="flex flex-col gap-4 overflow-hidden rounded-md bg-astro-gray-700 px-6 shadow-md lg:flex-row"
+			class="flex flex-col overflow-hidden rounded-md bg-astro-gray-700 px-6 @sm:flex-row @sm:gap-6"
 		>
 			<div class="flex flex-1 flex-col gap-4 py-6 text-astro-gray-200">
-				<h3>Get started with a new Astro project!</h3>
+				<h3 class="font-medium text-white">Get started with a new Astro project!</h3>
 				<p>
 					Open any of these templates in your choice of online code editor, or view the source code
 					on GitHub.
@@ -20,7 +23,7 @@ import houstonOmg from '../assets/houston_omg.webp';
 			<img
 				src={houstonOmg.src}
 				alt="Astro's mascot, Houston, making an 'omg' face"
-				class="-mb-1 self-center lg:self-end"
+				class="-mb-px h-8 w-auto self-center @sm:self-end @md:-mb-1 @md:h-16 @lg:h-24"
 				width="156"
 				height="104"
 			/>