aboutPage almost ready

src/components/LayoutSingleColumn/LayoutSingleColumn.css

@@ -13,7 +13,4 @@
   /* Expand to the full remaining width of the viewport */
   display: flex;
   flex-direction: column;
-  width: calc(100% - 72px);
-  max-width: 1056px;
-  margin: 88px auto;
 }

src/containers/AboutPage/AboutPage.css

@@ -5,7 +5,16 @@
 
 .pageTitle {
   text-align: center;
+}
 
+.staticPageWrapper {
+  width: calc(100% - 48px);
+  max-width: 1056px;
+  margin: 72px auto;
+
+  @media (--viewportMedium) {
+    width: calc(100% - 72px);
+  }
 }
 
 .coverImage {
@@ -18,15 +27,28 @@
 
 .contentWrapper {
   display: flex;
+  flex-wrap: wrap;
+
+  @media (--viewportMedium) {
+    flex-wrap: nowrap;
+  }
+
 }
 
 .contentSide {
-  width: 193px;
-  margin-right: 103px;
-  margin-top: 8px;
+  font-style: italic;
+
+  @media (--viewportMedium) {
+    width: 193px;
+    margin-right: 103px;
+    margin-top: 8px;
+  }
 }
 
 .contentMain {
-  max-width: 650px;
   width: 90%;
+
+  @media (--viewportMedium) {
+    max-width: 650px;
+  }
 }

src/containers/AboutPage/AboutPage.js

@@ -32,7 +32,7 @@ const AboutPage = () => {
           <TopbarContainer />
         </LayoutWrapperTopbar>
 
-        <LayoutWrapperMain>
+        <LayoutWrapperMain className={css.staticPageWrapper}>
           <h1 className={css.pageTitle}>It&#8217;s about Saunatime.</h1>
           <img className={css.coverImage} src={image} alt="My first ice cream." />