Respect aspect of image on backstage component for when HTML5 video is added

Author: webstackdev

src/components/Home/Backstage/index.astro

@@ -34,23 +34,20 @@ const visibleFeatures = features.slice(0, 4)
 ---
 
 <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-title">
-  <div class="mb-8 space-y-2">
-    <p class="text-md font-bold text-primary uppercase tracking-widest">{pretitle}</p>
-    <h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
-      Give your developers <span class="text-primary">superpowers</span>
-    </h2>
-  </div>
   <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
     <!-- Left column: headline + image -->
-    <div class="lg:col-span-2 space-y-6">
+    <div class="lg:col-span-2 space-y-4">
+      <p class="text-md font-bold text-primary uppercase tracking-widest">{pretitle}</p>
+      <h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
+        Give your developers <span class="text-primary">superpowers</span>
+      </h2>
       <p class="text-lg text-content-offset leading-relaxed">{description}</p>
-
       <!-- Image -->
-      <div class="aspect-square bg-page-offset rounded-2xl border-2 border-dashed border-trim overflow-hidden">
+      <div class="mt-8">
         <Image
           src={backstageBackground}
           alt="Backstage interface preview"
-          class="h-full w-full object-cover"
+          class="h-auto w-full object-contain"
         />
       </div>
     </div>