tweaks to css of health form

assets/css/compiled/main.css

@@ -723,6 +723,40 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 853px) {
+  .container {
+    max-width: 853px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .prose {
   color: var(--tw-prose-body);
   max-width: 65ch;
@@ -2447,6 +2481,18 @@ select {
   padding-top: 0.75rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2459,14 +2505,6 @@ select {
   padding-left: 1rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }

layouts/shortcodes/health-form.html

@@ -360,8 +360,8 @@
       </div>
     </div>
     <div class="basis-full mt-10">
-      <h3 class="p-4">What medication schedule do you follow?</h3>
+      <h3 class="pt-4 px-4">What medication schedule do you follow?</h3>
-      <h3 class="p-4">Medication must be in it's original labeled container from the pharmacy</h3>
+      <h4 class="px-4 pt-2 pb-4">Medication must be in it's original labeled container from the pharmacy</h3>
       <label for="medication-schedule" class="p-4">
         Please write them out in this pattern and a new medication on each line.
         <br>