feat: implement mobile design

src/components/mdx/Manifesto/style.module.css

@@ -15,17 +15,9 @@
   font-family: serif !important;
 }
 
-.inner {
-  max-width: 796px;
-  margin: auto;
-}
-
-.inner > * {
-  margin: auto;
-}
-
 .container h2 {
   text-align: center;
+  margin-top: 60px !important;
 }
 
 .container header {
@@ -45,11 +37,6 @@
   margin: 60px auto;
 }
 
-section p {
-  font-size: var(--lsd-body2-fontSize);
-  line-height: var(--lsd-body2-lineHeight);
-}
-
 .container p {
   text-align: justify;
   text-justify: inter-word;
@@ -68,6 +55,16 @@ section p {
   margin-top: var(--lsd-body1-lineHeight);
 }
 
+.inner {
+  max-width: calc(796px + var(--content-padding) * 2);
+  margin: auto;
+  padding-inline: var(--content-padding);
+}
+
+.inner > * {
+  margin: auto;
+}
+
 .logoWrapper {
   width: 100%;
   height: 62px;
@@ -79,6 +76,11 @@ section p {
   filter: invert(100%);
 }
 
+section p {
+  font-size: var(--lsd-body2-fontSize);
+  line-height: var(--lsd-body2-lineHeight);
+}
+
 .cta {
   display: flex;
   justify-content: center;
@@ -92,3 +94,25 @@ section p {
   border: 1px solid black;
   box-sizing: border-box;
 }
+
+@media (max-width: 575px) {
+  .container {
+    padding: 52px 0;
+  }
+
+  .container section {
+    margin: 52px auto;
+  }
+
+  .container h2 {
+    margin-top: 52px !important;
+  }
+
+  .container article {
+    margin-bottom: 52px;
+  }
+
+  .logoWrapper img {
+    width: 62px;
+  }
+}