Pad content to footer, better handle carousel

src/pages/index.astro

@@ -109,7 +109,7 @@ const tracks = (
       <div class="flex h-48 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          class="absolute -z-40 h-full w-full"
+          class="h-full w-full"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-75 dark:opacity-25"
@@ -118,13 +118,15 @@ const tracks = (
           quality={5}
           height={192}
           shuffle={true}
-        />
-        <a
-          href="/contact/"
-          class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
+          ><div class="flex h-full w-full items-center">
+            <a
+              href="/contact/"
+              class="text-md font-header repeat text-primary hover:bg-primary mx-auto inline-block rounded bg-white px-6 py-3 font-light uppercase drop-shadow-lg/75 transition hover:text-white hover:ring-2 hover:ring-white"
+            >
+              Get in touch!
+            </a>
+          </div></ImageCarousel
         >
-          Get in touch!
-        </a>
       </div>
     </section>
     <section id="projects" class="overflow-hidden bg-white dark:bg-gray-950">
@@ -203,10 +205,10 @@ const tracks = (
       </div>
     </section>
     <section id="fillerUntilServicesIsComplete" class="text-white">
-      <div class="flex h-64 w-full items-center justify-center">
+      <div class="flex h-96 w-full items-center justify-center">
         <ImageCarousel
           images={imagesForCTAArray}
-          class="absolute -z-40 h-full w-full overflow-hidden"
+          class="h-full w-full"
           foreground={true}
           foregroundColour="bg-primary"
           foregroundOpacity="opacity-50 dark:opacity-25"