diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 2a8c24c..ef65360 100644
--- a/src/routes/about/+page.svelte
+++ b/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>
diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss
index 407f7e3..1dba19c 100644
--- a/src/style/pages/_about.scss
+++ b/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;
             }
         }