fix homepage intro on small screens

src/pages/index.astro

@@ -75,22 +75,24 @@ 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">
-        <iframe
-          class="aspect-video w-full border-0"
-          src={HOMEPAGE_TRAILER_URL}
-          title="CraftAttack 9 Trailer"
-          allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
-          allowfullscreen
-          loading="lazy"
-        ></iframe>
+      <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}
+            title="CraftAttack 9 Trailer"
+            allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+            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>