fix padding

components/description/PillarsFlex.js

+import styled from "styled-components";
+import AnimateImage from "../AnimateImage";
+
+const Pillar = styled.div`
+  width: 15vw;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: space-between;
+`;
+
+const Image = styled.img`
+  padding: 1%;
+  width: 12vw;
+  margin: auto;
+  @media only screen and (max-width: 768px) {
+    width: 80vw;
+    height: auto;
+  }
+`;
+
+const Black = styled.strong`
+  background-color: #272727;
+  background-size: 100%;
+  background-repeat: repeat;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+  text-align: center;
+`;
+
+export default function PillarsFlex({ alternate }) {
+  return (
+    <>
+      {/* desktop */}
+      <div
+        className="flex-col desktop-only"
+        style={{ justifyContent: "space-between", textAlign: "center" }}
+      >
+        <div className="flex-row" style={{ justifyContent: "space-between" }}>
+          <Pillar>
+            <AnimateImage
+              svgs={["1", "2", "3", "4", "5", "6"]}
+              prefix={
+                "https://static.igem.wiki/teams/4796/wiki/animations/production/"
+              }
+            />
+          </Pillar>
+          <Pillar>
+            <AnimateImage
+              svgs={["13", "14", "15", "16", "17", "18"]}
+              prefix={
+                "https://static.igem.wiki/teams/4796/wiki/animations/energy/"
+              }
+            />
+          </Pillar>
+          <Pillar>
+            <AnimateImage
+              svgs={["6", "7", "8", "9", "10", "11", "12"]}
+              prefix={
+                "https://static.igem.wiki/teams/4796/wiki/animations/purification/"
+              }
+            />
+          </Pillar>
+        </div>
+
+        <div className="flex-row" style={{ justifyContent: "space-between" }}>
+          <Pillar>
+            {alternate ? (
+              <Black>
+                <p>Protein Production Efficiency</p>
+              </Black>
+            ) : (
+              <White>
+                <p>Protein Production Efficiency</p>
+              </White>
+            )}
+          </Pillar>
+          <Pillar>
+            {alternate ? (
+              <Black>
+                <p>
+                  Energy Usage <br />
+                  Efficiency
+                </p>
+              </Black>
+            ) : (
+              <White>
+                <p>
+                  Energy Usage <br />
+                  Efficiency
+                </p>
+              </White>
+            )}
+          </Pillar>
+          <Pillar>
+            {alternate ? (
+              <Black>
+                <p>Protein Purification Efficiency</p>
+              </Black>
+            ) : (
+              <White>
+                <p>Protein Purification Efficiency</p>
+              </White>
+            )}
+          </Pillar>
+        </div>
+
+        <div className="flex-row" style={{ justifyContent: "space-between" }}>
+          <Pillar>
+            <p>
+              Employing rapid dividing <i>Vibrio natriegens</i> as a chassis for
+              cell free protein synthesis.
+            </p>
+          </Pillar>
+          <Pillar>
+            <p>
+              Using oxidative phosphorylation instead of substrate level through
+              split inteins.
+            </p>
+          </Pillar>
+          <Pillar>
+            <p>Thiol-sensitive intein for affinity tag purification aid.</p>
+          </Pillar>
+        </div>
+      </div>
+    </>
+  );
+}

pages/design.mdx

 import ContentLayout from "../components/ContentLayout.js";
 import Figure from "../components/Figure.js";
-import Pillars from "@/components/description/Pillars";
+import PillarsFlex from "@/components/description/PillarsFlex";
 
 export const meta = {
   title: "Design",
@@ -56,7 +56,7 @@ a high efficiency protein production system that utilises cheap
 substrates and allows for simultaneous protein biosynthesis, extraction
 and purification.**
 
-<Pillars alternate />
+<PillarsFlex alternate />
 
 Figure 1: The three pillars of protein production P.I.L.O.T seeks to tackle.
 

pages/usermanual.mdx

 import ContentLayout from "../components/ContentLayout.js";
-import Pillars from "@/components/description/Pillars";
+import PillarsFlex from "@/components/description/PillarsFlex";
 import Materialtable from "@/components/usermanual/Materialtable";
 import Eppendorftable from "@/components/usermanual/Eppendorftable";
 import Preparationtable from "@/components/usermanual/Preparationtable";
@@ -30,7 +30,7 @@ Cell-free Protein Synthesis is the scalable, _in-vitro_ production of recombinan
 
 ## Project Pillars
 
-<Pillars alternate />
+<PillarsFlex alternate />
 
 ### Strategic Energy Optimization through Methanol Integration