refactor: update main.css to enhance utility classes for margins, heights, and spacing, improving layout flexibility and responsiveness

styles/main.css

@@ -779,10 +779,6 @@ video {
   margin-top: 2.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-20 {
   margin-top: 5rem;
 }
@@ -791,10 +787,18 @@ video {
   margin-top: 0.75rem;
 }
 
+.mt-12 {
+  margin-top: 3rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -883,22 +887,22 @@ video {
   height: 24rem;
 }
 
-.h-\[22vh\] {
-  height: 22vh;
+.h-\[145px\] {
+  height: 145px;
 }
 
-.h-\[29vh\] {
-  height: 29vh;
+.h-\[301px\] {
+  height: 301px;
+}
+
+.h-\[446px\] {
+  height: 446px;
 }
 
 .h-\[64px\] {
   height: 64px;
 }
 
-.h-\[6vh\] {
-  height: 6vh;
-}
-
 .h-auto {
   height: auto;
 }
@@ -915,6 +919,54 @@ video {
   height: 100vh;
 }
 
+.h-\[320px\] {
+  height: 320px;
+}
+
+.h-\[220px\] {
+  height: 220px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[25vh\] {
+  height: 25vh;
+}
+
+.h-\[18vh\] {
+  height: 18vh;
+}
+
+.h-\[7vh\] {
+  height: 7vh;
+}
+
+.h-\[30vh\] {
+  height: 30vh;
+}
+
+.h-\[22vh\] {
+  height: 22vh;
+}
+
+.h-\[8vh\] {
+  height: 8vh;
+}
+
+.h-\[29vh\] {
+  height: 29vh;
+}
+
+.h-\[21vh\] {
+  height: 21vh;
+}
+
+.h-\[6vh\] {
+  height: 6vh;
+}
+
 .min-h-\[64px\] {
   min-height: 64px;
 }
@@ -1031,6 +1083,10 @@ video {
   max-width: 20rem;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1148,14 +1204,14 @@ video {
   gap: 1.5rem;
 }
 
-.gap-7 {
-  gap: 1.75rem;
-}
-
 .gap-8 {
   gap: 2rem;
 }
 
+.gap-7 {
+  gap: 1.75rem;
+}
+
 .space-x-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2.5rem * var(--tw-space-x-reverse));
@@ -1192,6 +1248,12 @@ video {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1574,6 +1636,10 @@ video {
   padding-right: 1.5rem;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
 .pt-12 {
   padding-top: 3rem;
 }
@@ -2241,18 +2307,90 @@ video {
     margin-left: 2rem;
   }
 
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
   .lg\:mt-8 {
     margin-top: 2rem;
   }
 
+  .lg\:h-\[70vh\] {
+    height: 70vh;
+  }
+
+  .lg\:h-\[90vh\] {
+    height: 90vh;
+  }
+
+  .lg\:h-\[50vh\] {
+    height: 50vh;
+  }
+
+  .lg\:h-\[600px\] {
+    height: 600px;
+  }
+
+  .lg\:h-\[500px\] {
+    height: 500px;
+  }
+
+  .lg\:h-\[85vh\] {
+    height: 85vh;
+  }
+
+  .lg\:h-\[60vh\] {
+    height: 60vh;
+  }
+
   .lg\:h-\[65vh\] {
     height: 65vh;
   }
 
+  .lg\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .lg\:min-h-\[90vh\] {
+    min-height: 90vh;
+  }
+
+  .lg\:min-h-\[100vh\] {
+    min-height: 100vh;
+  }
+
+  .lg\:min-h-\[150vh\] {
+    min-height: 150vh;
+  }
+
+  .lg\:min-h-\[900px\] {
+    min-height: 900px;
+  }
+
+  .lg\:min-h-\[800px\] {
+    min-height: 800px;
+  }
+
+  .lg\:min-h-\[700px\] {
+    min-height: 700px;
+  }
+
+  .lg\:min-h-\[600px\] {
+    min-height: 600px;
+  }
+
+  .lg\:min-h-\[60vh\] {
+    min-height: 60vh;
+  }
+
   .lg\:min-h-\[65vh\] {
     min-height: 65vh;
   }
 
+  .lg\:min-h-\[80vh\] {
+    min-height: 80vh;
+  }
+
   .lg\:w-36 {
     width: 9rem;
   }
@@ -2289,6 +2427,18 @@ video {
     gap: 2rem;
   }
 
+  .lg\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
+  }
+
+  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  }
+
   .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2312,6 +2462,11 @@ video {
     padding-top: 12rem;
   }
 
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -2332,6 +2487,11 @@ video {
     line-height: 1.75rem;
   }
 
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:leading-snug {
     line-height: 1.375;
   }