fix homepage intro on small screens

src/pages/index.astro

@@ -75,7 +75,8 @@ const information = [
 
   {HOMEPAGE_TRAILER_URL && (
     <section class="bg-base-300 w-full px-4 py-12" aria-labelledby="trailer-heading">
-      <div class="mx-auto flex items-center w-full max-w-7xl gap-30">
+      <div class="mx-auto flex flex-col xl:flex-row items-center w-full max-w-360 gap-10 xl:gap-30">
+        <div class="w-full max-w-2xl">
           <iframe
             class="aspect-video w-full border-0"
             src={HOMEPAGE_TRAILER_URL}
@@ -84,13 +85,14 @@ const information = [
             allowfullscreen
             loading="lazy"
           ></iframe>
+        </div>
 
-        <div class="hidden items-center gap-2 lg:flex" aria-hidden="true">
+        <div class="hidden items-center gap-2 xl:flex" aria-hidden="true">
           <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
           <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
         </div>
 
-        <div class="space-y-4">
+        <div class="space-y-4 w-full max-w-3xl">
           <h2 id="trailer-heading" class="text-2xl font-bold">
             CraftAttack geht in die neunte Runde - und du kannst dabei sein!
           </h2>