pages/about/index.module.css

@@ -34,6 +34,10 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
+  .page {
+    margin-bottom: calc(30rem / 16);
+  }
+
   .titleContainer {
     display: flex;
     flex-direction: column;

pages/about/our-supporters.module.css

@@ -1,3 +1,7 @@
+.page {
+  margin-bottom: calc(60rem / 16);
+}
+
 .headerContainer {
   display: flex;
   flex-direction: row;
@@ -18,6 +22,10 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
+  .page {
+    margin-bottom: calc(30rem / 16);
+  }
+
   .headerContainer {
     flex-direction: column-reverse;
     align-items: center;

pages/about/our-supporters.tsx

@@ -9,7 +9,7 @@ import styles from "./our-supporters.module.css";
 
 export default function OurSupporters() {
   return (
-    <>
+    <div className={styles.page}>
       <Title>Our Supporters</Title>
       <div className={styles.headerContainer}>
         <h1 className={styles.header}>Our Supporters</h1>
@@ -18,6 +18,6 @@ export default function OurSupporters() {
       <div className={styles.content}>
         <Content />
       </div>
-    </>
+    </div>
   );
 }

pages/get-involved.module.css

@@ -1,5 +1,5 @@
 .page {
-  margin: calc(50rem / 16) 0;
+  margin: calc(60rem / 16) 0;
 }
 
 .page > header {
@@ -51,6 +51,10 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
+  .page {
+    margin: calc(30rem / 16);
+  }
+
   .page > header {
     display: flex;
     flex-direction: column-reverse;

pages/index.module.css

@@ -1,5 +1,5 @@
 .page {
-  padding-bottom: calc(60rem / 16);
+  margin-bottom: calc(60rem / 16);
 }
 
 .intro {
@@ -126,7 +126,7 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .page {
-    padding-bottom: calc(30rem / 16);
+    margin-bottom: calc(30rem / 16);
   }
 
   .intro {