style: improve responsive spacing and display classes

Update home page and CSS to use responsive utility classes for spacing
and display. Refactor margin and block styles for better layout across
screen sizes.

Author: zorexsalvo

app/home/templates/home/index.html

@@ -26,13 +26,10 @@
                     </div>
                 </div>
             </section>
-            <img src="{% static 'img/vectors/footer.png' %}"
-                 class="w-full block"
-                 style="margin-top: -10em;
-                        margin-bottom: -7em">
+            <img src="{% static 'img/vectors/footer.png' %}" class="w-full block xl:mt-[-10em] xl:mb-[-7em]">
         </main>
         <!-- Section Break -->
-        <div class="w-full py-0 my-0 z-10 -mb-25">
+        <div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block">
             <img src="{% static 'img/vectors/section-break-1.svg' %}"
                  alt="Section Break"
                  class="w-full block">

static/css/app.css

@@ -15,9 +15,9 @@
     --container-5xl: 64rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
-    --text-sm: 16px;
+    --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 18px;
+    --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
@@ -1811,6 +1811,16 @@
       }
     }
   }
+  .md\:mt-\[-10em\] {
+    @media (width >= 48rem) {
+      margin-top: -10em;
+    }
+  }
+  .md\:mb-\[-7em\] {
+    @media (width >= 48rem) {
+      margin-bottom: -7em;
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -1848,6 +1858,11 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
+  .lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
@@ -1887,6 +1902,21 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
+  .xl\:mt-\[-10em\] {
+    @media (width >= 80rem) {
+      margin-top: -10em;
+    }
+  }
+  .xl\:mb-\[-7em\] {
+    @media (width >= 80rem) {
+      margin-bottom: -7em;
+    }
+  }
+  .xl\:block {
+    @media (width >= 80rem) {
+      display: block;
+    }
+  }
 }
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap");
 body {