pages/about/index.module.css

@@ -1,27 +1,22 @@
 .title {
   color: var(--purple-2);
-  font-size: 48px;
+  font-size: calc(48rem / 16);
-  height: 80px;
+  height: calc(80rem / 16);
   margin-top: auto;
-  padding-left: 20px;
+  padding-left: calc(20rem / 16);
 }
 
-.headings h2 {
+.content {
+  color: black;
+  background-color: white;
+}
+
+.content h2 {
   color: var(--purple-2);
   font-weight: 600;
 }
 
-.text {
+.content span {
-  background-color: white;
-}
-
-.text,
-.text li {
-  font-size: 16px;
-  color: black;
-}
-
-.text span {
   color: var(--blue-2);
 }
 
@@ -34,27 +29,27 @@
   margin: 0 auto;
   overflow-y: clip;
   overflow-x: clip;
-  height: 200px;
+  height: calc(200rem / 16);
 }
 
 .codey {
   transform: rotate(1.91deg);
   z-index: -1;
-  height: 400px;
+  height: calc(400rem / 16);
 }
 
 /*for temp mailing list components*/
 .mailingList {
-  margin: 4rem auto;
+  margin: calc(4rem / 16) auto;
   max-width: calc(806rem / 16);
 }
 
 .mailingList form > * {
-  margin: 0.5rem auto;
+  margin: calc(0.5rem / 16) auto;
 }
 
 .mailingList form input {
-  border-radius: 16px;
+  border-radius: calc(16rem / 16);
   padding: calc(8rem / 16) 0;
 }
 
@@ -78,30 +73,30 @@
     max-width: calc(800rem / 16);
     margin: 0 auto;
     overflow-y: clip;
-    height: 130px;
+    height: calc(130rem / 16);
-  }
-
-  .headings h2 {
-    font-size: 24px;
   }
 
   .title {
-    font-size: 24px;
+    font-size: calc(24rem / 16);
     font-weight: 600;
-    padding-left: 0px;
+    padding-left: calc(0rem / 16);
+  }
+
+  .content h2 {
+    font-size: calc(24rem / 16);
+  }
+
+  .content ul {
+    padding-left: calc(20rem / 16);
+  }
+
+  .content ol {
+    padding-left: calc(16rem / 16);
   }
 
   .codey {
-    width: 140.21px;
+    width: calc(140.21rem / 16);
-    height: 124.65px;
+    height: calc(124.65rem / 16);
-    padding-left: 30px;
+    padding-left: calc(30rem / 16);
-  }
-
-  .text ul {
-    padding-left: 20px;
-  }
-
-  .text ol {
-    padding-left: 16px;
   }
 }

pages/about/index.tsx

@@ -12,10 +12,8 @@ export default function AboutUs() {
         <h1 className={styles.title}>About Us!</h1>
         <Image src="/about/codey.svg" className={styles.codey} />
       </div>
-      <div className={styles.headings}>
+      <div className={styles.content}>
-        <div className={styles.text}>
+        <Content />
-          <Content />
-        </div>
       </div>
       <div className={styles.mailingList}>
         <h2>Connect with us!</h2>