Put About Purpose section on grid

src/routes/about/+page.svelte

@@ -233,8 +233,8 @@
         </div>
     </section>
 
-    <section class="about__purpose" bind:this={purposeEl}>
-        <div class="container-wide">
+    <section class="about__purpose grid" bind:this={purposeEl}>
+        <div class="container">
             <div class="text title-xl" role="heading">
                 {@html about.purpose_text}
             </div>

src/style/pages/_about.scss

@@ -140,19 +140,19 @@
             margin-top: 120px;
         }
 
-        .container-wide {
+        .container {
+            grid-column: 2 / -2;
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
-            height: calc(100vh - var(--sides));
+            height: calc(var(--vh) * 0.9);
             max-height: 720px;
             color: #fff;
             padding: 0 8%;
 
             @include bp (sm) {
                 padding: 0 18%;
-                min-height: calc(100vh - var(--sides));
                 max-height: 1200px;
             }
         }