Fix mobile form

Author: tcaldwell-x

pilot-application.mdx

@@ -4,6 +4,6 @@ sidebarTitle: "Pilot Application"
 mode: 'custom'
 ---
 
-<div id="pilot-application" className="flex items-center justify-center" style={{marginLeft: '15rem', marginRight: '15rem'}}>
+<div id="pilot-application" className="flex items-center justify-center">
 <iframe data-tally-src="https://tally.so/embed/3xGW1J?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="880" frameborder="0" marginheight="0" marginwidth="0" title="X API Pay-Per-Use Pricing Pilot Application"></iframe>
 </div>

style.css

@@ -108,4 +108,31 @@ td[data-label="Free Limit"] strong {
 
 #sidebar-content {
   padding-left: 2rem;
-}
+}
+
+#pilot-application {
+  margin-left: 15rem;
+  margin-right: 15rem;
+}
+
+@media (max-width: 1200px) {
+  #pilot-application {
+    margin-left: 10rem;
+    margin-right: 10rem;
+  }
+}
+
+@media (max-width: 992px) {
+  #pilot-application {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  #pilot-application {
+    margin-left: 0rem;
+    margin-right: 0rem;
+  }
+}
+