more responsive

Author: tcaldwell-x

pilot.mdx

@@ -504,7 +504,7 @@ import { Button } from '/snippets/button.mdx';
 </div>
 
 <div
-  className="relative w-full flex items-center justify-between"
+  className="footer-section relative w-full flex items-center justify-between"
   style={{
     marginTop: '3rem',
     height: '14rem',
@@ -541,11 +541,11 @@ import { Button } from '/snippets/button.mdx';
     }}
   />
   {/* Content */}
-  <div style={{ position: 'relative', zIndex: 1 }} className="flex flex-col text-gray-900 text-3xl dark:text-gray-200 font-branded">
+  <div style={{ position: 'relative', zIndex: 1 }} className="footer-text flex flex-col text-gray-900 text-3xl dark:text-gray-200 font-branded">
     <p>Ready to join the pilot?</p>
     <p>Start using the pay-per-use model today.</p>
   </div>
-  <div style={{ position: 'relative', zIndex: 1 }} className="flex flex-row gap-6 items-center">
+  <div style={{ position: 'relative', zIndex: 1 }} className="footer-buttons flex flex-row gap-6 items-center">
     <div className="not-prose group">
       <a href="/pilot-application" >
         <button className="flex items-center space-x-2.5 py-4 px-8 bg-primary-dark dark:bg-white text-lg text-white dark:text-gray-950 rounded-xl group-hover:opacity-[0.9] font-medium">

style.css

@@ -119,4 +119,34 @@ td[data-label="Free Limit"] strong {
   .step {
     padding-right: 0 !important;
   }
+}
+
+@media (max-width: 768px) { 
+  .footer-section {
+    flex-direction: column; 
+    justify-content: center;
+    padding-left: 2rem; 
+    padding-right: 2rem;
+    height: auto; 
+    gap: 2rem; 
+  }
+
+  .footer-text {
+    text-align: center; 
+    font-size: 1.5rem; 
+  }
+
+  .footer-buttons {
+    justify-content: center; 
+    gap: 1rem; 
+    flex-wrap: wrap;
+  }
+
+  .footer-buttons .not-prose.group button {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    font-size: 1rem;
+  }
 }