fix the layout on 404 pages

404.html

@@ -3,20 +3,17 @@
 ---
 
 <div class="background-top-gray-gray"></div>
-<main class="default-content-container">
+<main class="container">
   <section class="row flex-lg-row-reverse single-section-full-height mb-0">
     <div class="col-12 col-lg-6 text-center">
       <img class="page-illustration large-screen-bigger" src="/assets/img/pages/404/404-page-illustration.svg" alt="404 illustration">
     </div>
     <div class="col-12 col-lg-6">
-      <p class="text-display-1 text-dark-1">
-        oops, it seems that you're lost
-      </p>
-      <p class="text-dark-2">
-        We’re not quite sure what went wrong. You can go back, or try looking on our Help Center if you need a hand.
-      </p>
+      <h2 class="mt-5 mb-3">
+        Oops! The page you are looking for is no longer here.
+      </h2>
       <a class="btn btn-primary btn-lg" href="/">
-        <i class="fas fa-angle-left"></i> Back to Homepage
+        Go to the Homepage
       </a>
     </div>
   </section>

_sass/_layout.scss

@@ -22,104 +22,11 @@ section {
   margin-bottom: 5rem;
 }
 
-
-// .no-gutters {
-//   margin-right: 0;
-//   margin-left: 0;
-
-//   > .col,
-//   > [class*="col-"] {
-//     padding-right: 0;
-//     padding-left: 0;
-//   }
-// }
-
-// .default-content-container {
-//   @include responsive-max-width;
-//   margin: 90px auto;
-
-//   > section {
-//     padding: 5rem 0;
-//   }
-
-//   @media (min-width: $lg-start) {
-
-//     > section {
-//       padding: 5rem 0;
-//     }
-//   }
-// }
-
-// .responsive-max-width {
-//   @include responsive-max-width;
-// }
-
 .elevated-container {
   background-color: $color-light-4;
   @include rounded-elevation;
 }
 
-// .w-sm-100 {
-//   @media (max-width: $xs-max) {
-//     width: 100%;
-//   }
-// }
-
-// .w-sm-50 {
-//   @media (max-width: $xs-max) {
-//     width: 50% !important;
-//   }
-// }
-
-// .w-md-75 {
-//   @media (min-width: $md-start) {
-//     width: 75%;
-//   }
-// }
-
-// .w-md-50 {
-//   @media (min-width: $md-start) {
-//     width: 50%;
-//   }
-// }
-
-// .w-md-25 {
-//   @media (min-width: $md-start) {
-//     width: 25%;
-//   }
-// }
-
-// .w-xl-75 {
-//   @media (min-width: $xl-start) {
-//     width: 75%;
-//   }
-// }
-
-// .w-xl-80 {
-//   @media (min-width: $xl-start) {
-//     width: 80%;
-//   }
-// }
-
-// .w-xl-50 {
-//   @media (min-width: $xl-start) {
-//     width: 50%;
-//   }
-// }
-
-// .height-100vh {
-//   height: 100vh;
-// }
-
-// .single-section-full-height {
-//   height: calc(100vh - 170px - 170px);
-// }
-
-// .container-link {
-//   display: block;
-//   position: absolute;
-//   width: 100%;
-//   height: 100%;
-//   left: 0;
-//   top: 0;
-// }
+.single-section-full-height {
+  min-height: calc(100vh - 600px);
+}