diff --git a/STARTERKIT/components/_init.scss b/STARTERKIT/components/_init.scss
index 1b6860e..0c895ac 100644
--- a/STARTERKIT/components/_init.scss
+++ b/STARTERKIT/components/_init.scss
@@ -52,8 +52,8 @@
 @import 'support-for';
 // Add typey to manage font sizes and margins.
 @import 'typey';
-// Add the Zen Grids responsive layout mixins.
-@import 'zen-grids';
+// Add the Gridlex flexbox library http://gridlex.devlint.fr/.
+@import 'gridlex/src/gridlex-vars';
 
 
 // Mixins
diff --git a/STARTERKIT/components/asset-builds/css/kss-only.css b/STARTERKIT/components/asset-builds/css/kss-only.css
index b32f858..46a7168 100644
--- a/STARTERKIT/components/asset-builds/css/kss-only.css
+++ b/STARTERKIT/components/asset-builds/css/kss-only.css
@@ -1,19 +1,6 @@
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
 [id^='kssref-layouts-'] [class^='layout-'][class*='__'] {
   outline: 1px dotted #999999;
 }
 
-#kssref-layouts-layout-3column .kss-modifier__example {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-@media (min-width: 777px) {
-  #kssref-layouts-layout-3column .kss-modifier__example {
-    padding-left: 12px;
-    padding-right: 13px;
-  }
-  [dir="rtl"] #kssref-layouts-layout-3column .kss-modifier__example {
-    padding-left: 13px;
-    padding-right: 12px;
-  }
-}
+/*# sourceMappingURL=kss-only.css.map */
diff --git a/STARTERKIT/components/asset-builds/css/layouts.css b/STARTERKIT/components/asset-builds/css/layouts.css
index 278ec5b..4f1a247 100644
--- a/STARTERKIT/components/asset-builds/css/layouts.css
+++ b/STARTERKIT/components/asset-builds/css/layouts.css
@@ -1,271 +1,1155 @@
-.layout-3col {
-  margin-left: -20px;
-  margin-right: -20px;
-  padding-left: 0;
-  padding-right: 0;
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey */
+.layout-swap {
+  position: relative;
+}
+
+@media (min-width: 555px) {
+  .layout-swap {
+    padding-top: 48px;
+  }
+}
+
+@media (min-width: 555px) {
+  .layout-swap__top {
+    position: absolute;
+    top: 0;
+    height: 48px;
+    width: 100%;
+  }
+}
+
+/* ==========================================================================
+    GRIDLEX
+    Just a Flexbox Grid System
+========================================================================== */
+[class*="grid"] {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-flow: row wrap;
+  margin: 0 -0.5rem;
+}
+
+[class^="col"],
+[class*="col-"] {
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+          flex: 0 0 auto;
+  padding: 0 0.5rem 1rem;
+}
+
+[class^="col"] {
+  -webkit-box-flex: 1;
+          flex: 1 1 0%;
+}
+
+[class^="grid"][class^="col"],
+[class^="grid"][class*="col-"] {
+  margin: 0;
+  padding: 0;
+}
+
+/************************
+    HELPERS SUFFIXES
+*************************/
+[class*="grid-"][class*="-noGutter"] {
+  margin: 0;
+}
+
+[class*="grid-"][class*="-noGutter"] > [class*="col"] {
+  padding: 0;
+}
+
+[class*="grid-"][class*="-noWrap"] {
+  flex-wrap: nowrap;
+}
+
+[class*="grid-"][class*="-center"] {
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+[class*="grid-"][class*="-right"] {
+  -webkit-box-pack: end;
+          justify-content: flex-end;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+[class*="grid-"][class*="-top"] {
+  -webkit-box-align: start;
+          align-items: flex-start;
+}
+
+[class*="grid-"][class*="-middle"] {
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+[class*="grid-"][class*="-bottom"] {
+  -webkit-box-align: end;
+          align-items: flex-end;
+}
+
+[class*="grid-"][class*="-reverse"] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+          flex-direction: row-reverse;
+}
+
+[class*="grid-"][class*="-column"] {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+}
+
+[class*="grid-"][class*="-column"] > [class*="col-"] {
+  flex-basis: auto;
+}
+
+[class*="grid-"][class*="-column-reverse"] {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+          flex-direction: column-reverse;
 }
 
-.layout-3col:before {
-  content: "";
-  display: table;
+[class*="grid-"][class*="-spaceBetween"] {
+  -webkit-box-pack: justify;
+          justify-content: space-between;
 }
 
-.layout-3col:after {
-  content: "";
-  display: table;
-  clear: both;
+[class*="grid-"][class*="-spaceAround"] {
+  justify-content: space-around;
 }
 
-.layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar, .layout-3col__col-1, .layout-3col__col-2, .layout-3col__col-3, .layout-3col__col-4, .layout-3col__col-x {
-  clear: both;
-  padding-left: 20px;
-  padding-right: 20px;
-  float: left;
-  width: 100%;
-  margin-left: 0%;
-  margin-right: -100%;
+[class*="grid-"][class*="-equalHeight"] > [class*="col"] {
+  display: -webkit-box;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-[dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x {
-  float: right;
-  margin-right: 0%;
-  margin-left: -100%;
+[class*="grid-"][class*="-equalHeight"] > [class*="col"] > * {
+  -webkit-box-flex: 1;
+          flex: 1 0 100%;
 }
 
-@media (min-width: 777px) {
-  .layout-3col {
-    margin-left: -12px;
-    margin-right: -13px;
-    padding-left: 0;
-    padding-right: 0;
+[class*="grid-"][class*="-noBottom"] > [class*="col"] {
+  padding-bottom: 0;
+}
+
+[class*="col-"][class*="-top"] {
+  align-self: flex-start;
+}
+
+[class*="col-"][class*="-middle"] {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+
+[class*="col-"][class*="-bottom"] {
+  align-self: flex-end;
+}
+
+[class*="col-"][class*="-first"] {
+  -webkit-box-ordinal-group: 0;
+          order: -1;
+}
+
+[class*="col-"][class*="-last"] {
+  -webkit-box-ordinal-group: 2;
+          order: 1;
+}
+
+/************************
+    GRID BY NUMBER
+*************************/
+[class*="grid-1"] > [class^="col"], [class*="grid-1"] > [class*='[class^="col"]-'] {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+[class*="grid-2"] > [class^="col"], [class*="grid-2"] > [class*='[class^="col"]-'] {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+[class*="grid-3"] > [class^="col"], [class*="grid-3"] > [class*='[class^="col"]-'] {
+  flex-basis: 33.33333%;
+  max-width: 33.33333%;
+}
+
+[class*="grid-4"] > [class^="col"], [class*="grid-4"] > [class*='[class^="col"]-'] {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+[class*="grid-5"] > [class^="col"], [class*="grid-5"] > [class*='[class^="col"]-'] {
+  flex-basis: 20%;
+  max-width: 20%;
+}
+
+[class*="grid-6"] > [class^="col"], [class*="grid-6"] > [class*='[class^="col"]-'] {
+  flex-basis: 16.66667%;
+  max-width: 16.66667%;
+}
+
+[class*="grid-7"] > [class^="col"], [class*="grid-7"] > [class*='[class^="col"]-'] {
+  flex-basis: 14.28571%;
+  max-width: 14.28571%;
+}
+
+[class*="grid-8"] > [class^="col"], [class*="grid-8"] > [class*='[class^="col"]-'] {
+  flex-basis: 12.5%;
+  max-width: 12.5%;
+}
+
+[class*="grid-9"] > [class^="col"], [class*="grid-9"] > [class*='[class^="col"]-'] {
+  flex-basis: 11.11111%;
+  max-width: 11.11111%;
+}
+
+[class*="grid-10"] > [class^="col"], [class*="grid-10"] > [class*='[class^="col"]-'] {
+  flex-basis: 10%;
+  max-width: 10%;
+}
+
+[class*="grid-11"] > [class^="col"], [class*="grid-11"] > [class*='[class^="col"]-'] {
+  flex-basis: 9.09091%;
+  max-width: 9.09091%;
+}
+
+[class*="grid-12"] > [class^="col"], [class*="grid-12"] > [class*='[class^="col"]-'] {
+  flex-basis: 8.33333%;
+  max-width: 8.33333%;
+}
+
+@media screen and (min-width: 1200px) {
+  [class*="_lg-1"] > [class^="col"], [class*="_lg-1"] > [class*='[class^="col"]-'] {
+    flex-basis: 100%;
+    max-width: 100%;
   }
-  .layout-3col:before {
-    content: "";
-    display: table;
+  [class*="_lg-2"] > [class^="col"], [class*="_lg-2"] > [class*='[class^="col"]-'] {
+    flex-basis: 50%;
+    max-width: 50%;
   }
-  .layout-3col:after {
-    content: "";
-    display: table;
-    clear: both;
+  [class*="_lg-3"] > [class^="col"], [class*="_lg-3"] > [class*='[class^="col"]-'] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
   }
-  [dir="rtl"] .layout-3col {
-    margin-left: -13px;
-    margin-right: -12px;
+  [class*="_lg-4"] > [class^="col"], [class*="_lg-4"] > [class*='[class^="col"]-'] {
+    flex-basis: 25%;
+    max-width: 25%;
   }
-  .layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar {
-    float: left;
-    width: 100%;
-    margin-left: 0%;
-    margin-right: -100%;
-    padding-left: 12px;
-    padding-right: 13px;
-  }
-  [dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar {
-    float: right;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  [dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar {
-    padding-left: 13px;
-    padding-right: 12px;
-  }
-  .layout-3col__first-left-sidebar, .layout-3col__col-1, .layout-3col__col-3, .layout-3col__col-x:nth-child(2n + 1) {
-    float: left;
-    width: 50%;
-    margin-left: 0%;
-    margin-right: -100%;
-    padding-left: 12px;
-    padding-right: 13px;
-  }
-  [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(2n + 1) {
-    float: right;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(2n + 1) {
-    padding-left: 13px;
-    padding-right: 12px;
-  }
-  .layout-3col__second-left-sidebar, .layout-3col__col-2, .layout-3col__col-4, .layout-3col__col-x:nth-child(2n) {
-    clear: none;
-    float: left;
-    width: 50%;
+  [class*="_lg-5"] > [class^="col"], [class*="_lg-5"] > [class*='[class^="col"]-'] {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+  [class*="_lg-6"] > [class^="col"], [class*="_lg-6"] > [class*='[class^="col"]-'] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*="_lg-7"] > [class^="col"], [class*="_lg-7"] > [class*='[class^="col"]-'] {
+    flex-basis: 14.28571%;
+    max-width: 14.28571%;
+  }
+  [class*="_lg-8"] > [class^="col"], [class*="_lg-8"] > [class*='[class^="col"]-'] {
+    flex-basis: 12.5%;
+    max-width: 12.5%;
+  }
+  [class*="_lg-9"] > [class^="col"], [class*="_lg-9"] > [class*='[class^="col"]-'] {
+    flex-basis: 11.11111%;
+    max-width: 11.11111%;
+  }
+  [class*="_lg-10"] > [class^="col"], [class*="_lg-10"] > [class*='[class^="col"]-'] {
+    flex-basis: 10%;
+    max-width: 10%;
+  }
+  [class*="_lg-11"] > [class^="col"], [class*="_lg-11"] > [class*='[class^="col"]-'] {
+    flex-basis: 9.09091%;
+    max-width: 9.09091%;
+  }
+  [class*="_lg-12"] > [class^="col"], [class*="_lg-12"] > [class*='[class^="col"]-'] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+}
+
+@media screen and (min-width: 993px) and (max-width: 1200px) {
+  [class*="_md-1"] > [class^="col"], [class*="_md-1"] > [class*='[class^="col"]-'] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="_md-2"] > [class^="col"], [class*="_md-2"] > [class*='[class^="col"]-'] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*="_md-3"] > [class^="col"], [class*="_md-3"] > [class*='[class^="col"]-'] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*="_md-4"] > [class^="col"], [class*="_md-4"] > [class*='[class^="col"]-'] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*="_md-5"] > [class^="col"], [class*="_md-5"] > [class*='[class^="col"]-'] {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+  [class*="_md-6"] > [class^="col"], [class*="_md-6"] > [class*='[class^="col"]-'] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*="_md-7"] > [class^="col"], [class*="_md-7"] > [class*='[class^="col"]-'] {
+    flex-basis: 14.28571%;
+    max-width: 14.28571%;
+  }
+  [class*="_md-8"] > [class^="col"], [class*="_md-8"] > [class*='[class^="col"]-'] {
+    flex-basis: 12.5%;
+    max-width: 12.5%;
+  }
+  [class*="_md-9"] > [class^="col"], [class*="_md-9"] > [class*='[class^="col"]-'] {
+    flex-basis: 11.11111%;
+    max-width: 11.11111%;
+  }
+  [class*="_md-10"] > [class^="col"], [class*="_md-10"] > [class*='[class^="col"]-'] {
+    flex-basis: 10%;
+    max-width: 10%;
+  }
+  [class*="_md-11"] > [class^="col"], [class*="_md-11"] > [class*='[class^="col"]-'] {
+    flex-basis: 9.09091%;
+    max-width: 9.09091%;
+  }
+  [class*="_md-12"] > [class^="col"], [class*="_md-12"] > [class*='[class^="col"]-'] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 992px) {
+  [class*="_sm-1"] > [class^="col"], [class*="_sm-1"] > [class*='[class^="col"]-'] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="_sm-2"] > [class^="col"], [class*="_sm-2"] > [class*='[class^="col"]-'] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*="_sm-3"] > [class^="col"], [class*="_sm-3"] > [class*='[class^="col"]-'] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*="_sm-4"] > [class^="col"], [class*="_sm-4"] > [class*='[class^="col"]-'] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*="_sm-5"] > [class^="col"], [class*="_sm-5"] > [class*='[class^="col"]-'] {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+  [class*="_sm-6"] > [class^="col"], [class*="_sm-6"] > [class*='[class^="col"]-'] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*="_sm-7"] > [class^="col"], [class*="_sm-7"] > [class*='[class^="col"]-'] {
+    flex-basis: 14.28571%;
+    max-width: 14.28571%;
+  }
+  [class*="_sm-8"] > [class^="col"], [class*="_sm-8"] > [class*='[class^="col"]-'] {
+    flex-basis: 12.5%;
+    max-width: 12.5%;
+  }
+  [class*="_sm-9"] > [class^="col"], [class*="_sm-9"] > [class*='[class^="col"]-'] {
+    flex-basis: 11.11111%;
+    max-width: 11.11111%;
+  }
+  [class*="_sm-10"] > [class^="col"], [class*="_sm-10"] > [class*='[class^="col"]-'] {
+    flex-basis: 10%;
+    max-width: 10%;
+  }
+  [class*="_sm-11"] > [class^="col"], [class*="_sm-11"] > [class*='[class^="col"]-'] {
+    flex-basis: 9.09091%;
+    max-width: 9.09091%;
+  }
+  [class*="_sm-12"] > [class^="col"], [class*="_sm-12"] > [class*='[class^="col"]-'] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  [class*="_xs-1"] > [class^="col"], [class*="_xs-1"] > [class*='[class^="col"]-'] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="_xs-2"] > [class^="col"], [class*="_xs-2"] > [class*='[class^="col"]-'] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*="_xs-3"] > [class^="col"], [class*="_xs-3"] > [class*='[class^="col"]-'] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*="_xs-4"] > [class^="col"], [class*="_xs-4"] > [class*='[class^="col"]-'] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*="_xs-5"] > [class^="col"], [class*="_xs-5"] > [class*='[class^="col"]-'] {
+    flex-basis: 20%;
+    max-width: 20%;
+  }
+  [class*="_xs-6"] > [class^="col"], [class*="_xs-6"] > [class*='[class^="col"]-'] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*="_xs-7"] > [class^="col"], [class*="_xs-7"] > [class*='[class^="col"]-'] {
+    flex-basis: 14.28571%;
+    max-width: 14.28571%;
+  }
+  [class*="_xs-8"] > [class^="col"], [class*="_xs-8"] > [class*='[class^="col"]-'] {
+    flex-basis: 12.5%;
+    max-width: 12.5%;
+  }
+  [class*="_xs-9"] > [class^="col"], [class*="_xs-9"] > [class*='[class^="col"]-'] {
+    flex-basis: 11.11111%;
+    max-width: 11.11111%;
+  }
+  [class*="_xs-10"] > [class^="col"], [class*="_xs-10"] > [class*='[class^="col"]-'] {
+    flex-basis: 10%;
+    max-width: 10%;
+  }
+  [class*="_xs-11"] > [class^="col"], [class*="_xs-11"] > [class*='[class^="col"]-'] {
+    flex-basis: 9.09091%;
+    max-width: 9.09091%;
+  }
+  [class*="_xs-12"] > [class^="col"], [class*="_xs-12"] > [class*='[class^="col"]-'] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+}
+
+/************************
+    COLS SIZES
+*************************/
+[class*='grid'] > [class*="col-1"] {
+  flex-basis: 8.33333%;
+  max-width: 8.33333%;
+}
+
+[class*='grid'] > [class*="col-2"] {
+  flex-basis: 16.66667%;
+  max-width: 16.66667%;
+}
+
+[class*='grid'] > [class*="col-3"] {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+[class*='grid'] > [class*="col-4"] {
+  flex-basis: 33.33333%;
+  max-width: 33.33333%;
+}
+
+[class*='grid'] > [class*="col-5"] {
+  flex-basis: 41.66667%;
+  max-width: 41.66667%;
+}
+
+[class*='grid'] > [class*="col-6"] {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+[class*='grid'] > [class*="col-7"] {
+  flex-basis: 58.33333%;
+  max-width: 58.33333%;
+}
+
+[class*='grid'] > [class*="col-8"] {
+  flex-basis: 66.66667%;
+  max-width: 66.66667%;
+}
+
+[class*='grid'] > [class*="col-9"] {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+[class*='grid'] > [class*="col-10"] {
+  flex-basis: 83.33333%;
+  max-width: 83.33333%;
+}
+
+[class*='grid'] > [class*="col-11"] {
+  flex-basis: 91.66667%;
+  max-width: 91.66667%;
+}
+
+[class*='grid'] > [class*="col-12"] {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+[class*="grid"] > [data-push-left*="off-0"] {
+  margin-left: 0;
+}
+
+[class*="grid"] > [data-push-left*="off-1"] {
+  margin-left: 8.33333%;
+}
+
+[class*="grid"] > [data-push-left*="off-2"] {
+  margin-left: 16.66667%;
+}
+
+[class*="grid"] > [data-push-left*="off-3"] {
+  margin-left: 25%;
+}
+
+[class*="grid"] > [data-push-left*="off-4"] {
+  margin-left: 33.33333%;
+}
+
+[class*="grid"] > [data-push-left*="off-5"] {
+  margin-left: 41.66667%;
+}
+
+[class*="grid"] > [data-push-left*="off-6"] {
+  margin-left: 50%;
+}
+
+[class*="grid"] > [data-push-left*="off-7"] {
+  margin-left: 58.33333%;
+}
+
+[class*="grid"] > [data-push-left*="off-8"] {
+  margin-left: 66.66667%;
+}
+
+[class*="grid"] > [data-push-left*="off-9"] {
+  margin-left: 75%;
+}
+
+[class*="grid"] > [data-push-left*="off-10"] {
+  margin-left: 83.33333%;
+}
+
+[class*="grid"] > [data-push-left*="off-11"] {
+  margin-left: 91.66667%;
+}
+
+[class*="grid"] > [data-push-right*="off-0"] {
+  margin-right: 0;
+}
+
+[class*="grid"] > [data-push-right*="off-1"] {
+  margin-right: 8.33333%;
+}
+
+[class*="grid"] > [data-push-right*="off-2"] {
+  margin-right: 16.66667%;
+}
+
+[class*="grid"] > [data-push-right*="off-3"] {
+  margin-right: 25%;
+}
+
+[class*="grid"] > [data-push-right*="off-4"] {
+  margin-right: 33.33333%;
+}
+
+[class*="grid"] > [data-push-right*="off-5"] {
+  margin-right: 41.66667%;
+}
+
+[class*="grid"] > [data-push-right*="off-6"] {
+  margin-right: 50%;
+}
+
+[class*="grid"] > [data-push-right*="off-7"] {
+  margin-right: 58.33333%;
+}
+
+[class*="grid"] > [data-push-right*="off-8"] {
+  margin-right: 66.66667%;
+}
+
+[class*="grid"] > [data-push-right*="off-9"] {
+  margin-right: 75%;
+}
+
+[class*="grid"] > [data-push-right*="off-10"] {
+  margin-right: 83.33333%;
+}
+
+[class*="grid"] > [data-push-right*="off-11"] {
+  margin-right: 91.66667%;
+}
+
+@media screen and (min-width: 1200px) {
+  [class*='grid'] > [class*="_lg-1"] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+  [class*='grid'] > [class*="_lg-2"] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*='grid'] > [class*="_lg-3"] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*='grid'] > [class*="_lg-4"] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*='grid'] > [class*="_lg-5"] {
+    flex-basis: 41.66667%;
+    max-width: 41.66667%;
+  }
+  [class*='grid'] > [class*="_lg-6"] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*='grid'] > [class*="_lg-7"] {
+    flex-basis: 58.33333%;
+    max-width: 58.33333%;
+  }
+  [class*='grid'] > [class*="_lg-8"] {
+    flex-basis: 66.66667%;
+    max-width: 66.66667%;
+  }
+  [class*='grid'] > [class*="_lg-9"] {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+  [class*='grid'] > [class*="_lg-10"] {
+    flex-basis: 83.33333%;
+    max-width: 83.33333%;
+  }
+  [class*='grid'] > [class*="_lg-11"] {
+    flex-basis: 91.66667%;
+    max-width: 91.66667%;
+  }
+  [class*='grid'] > [class*="_lg-12"] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-0"] {
+    margin-left: 0;
+  }
+  [class*="grid"] > [data-push-left*="_lg-1"] {
+    margin-left: 8.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-2"] {
+    margin-left: 16.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-3"] {
+    margin-left: 25%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-4"] {
+    margin-left: 33.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-5"] {
+    margin-left: 41.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-6"] {
     margin-left: 50%;
-    margin-right: -100%;
-    padding-left: 12px;
-    padding-right: 13px;
   }
-  [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x:nth-child(2n) {
-    float: right;
+  [class*="grid"] > [data-push-left*="_lg-7"] {
+    margin-left: 58.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-8"] {
+    margin-left: 66.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-9"] {
+    margin-left: 75%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-10"] {
+    margin-left: 83.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_lg-11"] {
+    margin-left: 91.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-0"] {
+    margin-right: 0;
+  }
+  [class*="grid"] > [data-push-right*="_lg-1"] {
+    margin-right: 8.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-2"] {
+    margin-right: 16.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-3"] {
+    margin-right: 25%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-4"] {
+    margin-right: 33.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-5"] {
+    margin-right: 41.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-6"] {
     margin-right: 50%;
-    margin-left: -100%;
   }
-  [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x:nth-child(2n) {
-    padding-left: 13px;
-    padding-right: 12px;
+  [class*="grid"] > [data-push-right*="_lg-7"] {
+    margin-right: 58.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-8"] {
+    margin-right: 66.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-9"] {
+    margin-right: 75%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-10"] {
+    margin-right: 83.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_lg-11"] {
+    margin-right: 91.66667%;
   }
 }
 
-@media (min-width: 999px) {
-  .layout-3col__full {
-    float: left;
-    width: 100%;
-    margin-left: 0%;
-    margin-right: -100%;
-  }
-  [dir="rtl"] .layout-3col__full {
-    float: right;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  .layout-3col__left-content {
-    float: left;
-    width: 66.66667%;
-    margin-left: 0%;
-    margin-right: -100%;
-  }
-  [dir="rtl"] .layout-3col__left-content {
-    float: right;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  .layout-3col__right-content {
-    float: left;
-    width: 66.66667%;
+@media screen and (min-width: 993px) and (max-width: 1200px) {
+  [class*='grid'] > [class*="_md-1"] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+  [class*='grid'] > [class*="_md-2"] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*='grid'] > [class*="_md-3"] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*='grid'] > [class*="_md-4"] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*='grid'] > [class*="_md-5"] {
+    flex-basis: 41.66667%;
+    max-width: 41.66667%;
+  }
+  [class*='grid'] > [class*="_md-6"] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*='grid'] > [class*="_md-7"] {
+    flex-basis: 58.33333%;
+    max-width: 58.33333%;
+  }
+  [class*='grid'] > [class*="_md-8"] {
+    flex-basis: 66.66667%;
+    max-width: 66.66667%;
+  }
+  [class*='grid'] > [class*="_md-9"] {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+  [class*='grid'] > [class*="_md-10"] {
+    flex-basis: 83.33333%;
+    max-width: 83.33333%;
+  }
+  [class*='grid'] > [class*="_md-11"] {
+    flex-basis: 91.66667%;
+    max-width: 91.66667%;
+  }
+  [class*='grid'] > [class*="_md-12"] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="grid"] > [data-push-left*="_md-0"] {
+    margin-left: 0;
+  }
+  [class*="grid"] > [data-push-left*="_md-1"] {
+    margin-left: 8.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_md-2"] {
+    margin-left: 16.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_md-3"] {
+    margin-left: 25%;
+  }
+  [class*="grid"] > [data-push-left*="_md-4"] {
     margin-left: 33.33333%;
-    margin-right: -100%;
   }
-  [dir="rtl"] .layout-3col__right-content {
-    float: right;
+  [class*="grid"] > [data-push-left*="_md-5"] {
+    margin-left: 41.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_md-6"] {
+    margin-left: 50%;
+  }
+  [class*="grid"] > [data-push-left*="_md-7"] {
+    margin-left: 58.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_md-8"] {
+    margin-left: 66.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_md-9"] {
+    margin-left: 75%;
+  }
+  [class*="grid"] > [data-push-left*="_md-10"] {
+    margin-left: 83.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_md-11"] {
+    margin-left: 91.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_md-0"] {
+    margin-right: 0;
+  }
+  [class*="grid"] > [data-push-right*="_md-1"] {
+    margin-right: 8.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_md-2"] {
+    margin-right: 16.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_md-3"] {
+    margin-right: 25%;
+  }
+  [class*="grid"] > [data-push-right*="_md-4"] {
     margin-right: 33.33333%;
-    margin-left: -100%;
   }
-  .layout-3col__left-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar {
-    clear: right;
-    float: right;
-    width: 33.33333%;
+  [class*="grid"] > [data-push-right*="_md-5"] {
+    margin-right: 41.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_md-6"] {
+    margin-right: 50%;
+  }
+  [class*="grid"] > [data-push-right*="_md-7"] {
+    margin-right: 58.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_md-8"] {
     margin-right: 66.66667%;
-    margin-left: -100%;
   }
-  [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar {
-    clear: left;
+  [class*="grid"] > [data-push-right*="_md-9"] {
+    margin-right: 75%;
   }
-  [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar {
-    float: left;
-    margin-left: 66.66667%;
-    margin-right: -100%;
-  }
-  .layout-3col__right-sidebar {
-    clear: right;
-    float: right;
-    width: 33.33333%;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  [dir="rtl"] .layout-3col__right-sidebar {
-    clear: left;
-  }
-  [dir="rtl"] .layout-3col__right-sidebar {
-    float: left;
-    margin-left: 0%;
-    margin-right: -100%;
-  }
-  .layout-3col__col-1, .layout-3col__col-x:nth-child(3n+1) {
-    clear: both;
-    float: left;
-    width: 33.33333%;
-    margin-left: 0%;
-    margin-right: -100%;
-  }
-  [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-x:nth-child(3n+1) {
-    float: right;
-    margin-right: 0%;
-    margin-left: -100%;
-  }
-  .layout-3col__col-2, .layout-3col__col-x:nth-child(3n+2) {
-    clear: none;
-    float: left;
-    width: 33.33333%;
+  [class*="grid"] > [data-push-right*="_md-10"] {
+    margin-right: 83.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_md-11"] {
+    margin-right: 91.66667%;
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 992px) {
+  [class*='grid'] > [class*="_sm-1"] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+  [class*='grid'] > [class*="_sm-2"] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*='grid'] > [class*="_sm-3"] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*='grid'] > [class*="_sm-4"] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*='grid'] > [class*="_sm-5"] {
+    flex-basis: 41.66667%;
+    max-width: 41.66667%;
+  }
+  [class*='grid'] > [class*="_sm-6"] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*='grid'] > [class*="_sm-7"] {
+    flex-basis: 58.33333%;
+    max-width: 58.33333%;
+  }
+  [class*='grid'] > [class*="_sm-8"] {
+    flex-basis: 66.66667%;
+    max-width: 66.66667%;
+  }
+  [class*='grid'] > [class*="_sm-9"] {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+  [class*='grid'] > [class*="_sm-10"] {
+    flex-basis: 83.33333%;
+    max-width: 83.33333%;
+  }
+  [class*='grid'] > [class*="_sm-11"] {
+    flex-basis: 91.66667%;
+    max-width: 91.66667%;
+  }
+  [class*='grid'] > [class*="_sm-12"] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-0"] {
+    margin-left: 0;
+  }
+  [class*="grid"] > [data-push-left*="_sm-1"] {
+    margin-left: 8.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-2"] {
+    margin-left: 16.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-3"] {
+    margin-left: 25%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-4"] {
     margin-left: 33.33333%;
-    margin-right: -100%;
   }
-  [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-x:nth-child(3n+2) {
-    float: right;
-    margin-right: 33.33333%;
-    margin-left: -100%;
+  [class*="grid"] > [data-push-left*="_sm-5"] {
+    margin-left: 41.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-6"] {
+    margin-left: 50%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-7"] {
+    margin-left: 58.33333%;
   }
-  .layout-3col__col-3, .layout-3col__col-x:nth-child(3n) {
-    clear: none;
-    float: left;
-    width: 33.33333%;
+  [class*="grid"] > [data-push-left*="_sm-8"] {
     margin-left: 66.66667%;
-    margin-right: -100%;
   }
-  [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(3n) {
-    float: right;
+  [class*="grid"] > [data-push-left*="_sm-9"] {
+    margin-left: 75%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-10"] {
+    margin-left: 83.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_sm-11"] {
+    margin-left: 91.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-0"] {
+    margin-right: 0;
+  }
+  [class*="grid"] > [data-push-right*="_sm-1"] {
+    margin-right: 8.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-2"] {
+    margin-right: 16.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-3"] {
+    margin-right: 25%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-4"] {
+    margin-right: 33.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-5"] {
+    margin-right: 41.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-6"] {
+    margin-right: 50%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-7"] {
+    margin-right: 58.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-8"] {
     margin-right: 66.66667%;
-    margin-left: -100%;
   }
-  .layout-3col__col-4 {
-    display: none;
+  [class*="grid"] > [data-push-right*="_sm-9"] {
+    margin-right: 75%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-10"] {
+    margin-right: 83.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_sm-11"] {
+    margin-right: 91.66667%;
   }
 }
 
-.layout-3col__grid-item-container {
-  padding-left: 0;
-  padding-right: 0;
+@media screen and (max-width: 640px) {
+  [class*='grid'] > [class*="_xs-1"] {
+    flex-basis: 8.33333%;
+    max-width: 8.33333%;
+  }
+  [class*='grid'] > [class*="_xs-2"] {
+    flex-basis: 16.66667%;
+    max-width: 16.66667%;
+  }
+  [class*='grid'] > [class*="_xs-3"] {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  [class*='grid'] > [class*="_xs-4"] {
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+  }
+  [class*='grid'] > [class*="_xs-5"] {
+    flex-basis: 41.66667%;
+    max-width: 41.66667%;
+  }
+  [class*='grid'] > [class*="_xs-6"] {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  [class*='grid'] > [class*="_xs-7"] {
+    flex-basis: 58.33333%;
+    max-width: 58.33333%;
+  }
+  [class*='grid'] > [class*="_xs-8"] {
+    flex-basis: 66.66667%;
+    max-width: 66.66667%;
+  }
+  [class*='grid'] > [class*="_xs-9"] {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+  [class*='grid'] > [class*="_xs-10"] {
+    flex-basis: 83.33333%;
+    max-width: 83.33333%;
+  }
+  [class*='grid'] > [class*="_xs-11"] {
+    flex-basis: 91.66667%;
+    max-width: 91.66667%;
+  }
+  [class*='grid'] > [class*="_xs-12"] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-0"] {
+    margin-left: 0;
+  }
+  [class*="grid"] > [data-push-left*="_xs-1"] {
+    margin-left: 8.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-2"] {
+    margin-left: 16.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-3"] {
+    margin-left: 25%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-4"] {
+    margin-left: 33.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-5"] {
+    margin-left: 41.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-6"] {
+    margin-left: 50%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-7"] {
+    margin-left: 58.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-8"] {
+    margin-left: 66.66667%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-9"] {
+    margin-left: 75%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-10"] {
+    margin-left: 83.33333%;
+  }
+  [class*="grid"] > [data-push-left*="_xs-11"] {
+    margin-left: 91.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-0"] {
+    margin-right: 0;
+  }
+  [class*="grid"] > [data-push-right*="_xs-1"] {
+    margin-right: 8.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-2"] {
+    margin-right: 16.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-3"] {
+    margin-right: 25%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-4"] {
+    margin-right: 33.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-5"] {
+    margin-right: 41.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-6"] {
+    margin-right: 50%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-7"] {
+    margin-right: 58.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-8"] {
+    margin-right: 66.66667%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-9"] {
+    margin-right: 75%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-10"] {
+    margin-right: 83.33333%;
+  }
+  [class*="grid"] > [data-push-right*="_xs-11"] {
+    margin-right: 91.66667%;
+  }
 }
 
-.layout-3col__grid-item-container:before {
-  content: "";
-  display: table;
+/************************
+    HIDING COLS
+*************************/
+[class*="col-"]:not([class*="col-0"]) {
+  display: block;
 }
 
-.layout-3col__grid-item-container:after {
-  content: "";
-  display: table;
-  clear: both;
+[class*="grid"][class*="col-"]:not([class*="col-0"]) {
+  display: -webkit-box;
+  display: flex;
 }
 
-.layout-center {
-  padding-left: 20px;
-  padding-right: 20px;
-  margin: 0 auto;
-  max-width: 1165px;
+[class*="col-"][class*="col-0"] {
+  display: none;
 }
 
-@media (min-width: 777px) {
-  .layout-center {
-    padding-left: 12px;
-    padding-right: 13px;
+@media screen and (min-width: 1200px) {
+  [class*="grid"] > :not([class*="_lg-0"]) {
+    display: block;
   }
-  [dir="rtl"] .layout-center {
-    padding-left: 13px;
-    padding-right: 12px;
+  [class*="grid"]:not([class*="_lg-0"]) {
+    display: -webkit-box;
+    display: flex;
+  }
+  [class*="grid"] > [class*="_lg-0"],
+  [class*="grid"][class*="-equalHeight"] > [class*="_lg-0"] {
+    display: none;
   }
 }
 
-.layout-center--shared-grid,
-.layout-center.layout-3col {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.layout-swap {
-  position: relative;
+@media screen and (min-width: 993px) and (max-width: 1200px) {
+  [class*="grid"] > :not([class*="_md-0"]) {
+    display: block;
+  }
+  [class*="grid"]:not([class*="_md-0"]) {
+    display: -webkit-box;
+    display: flex;
+  }
+  [class*="grid"] > [class*="_md-0"],
+  [class*="grid"][class*="-equalHeight"] > [class*="_md-0"] {
+    display: none;
+  }
 }
 
-@media (min-width: 555px) {
-  .layout-swap {
-    padding-top: 48px;
+@media screen and (min-width: 641px) and (max-width: 992px) {
+  [class*="grid"] > :not([class*="_sm-0"]) {
+    display: block;
+  }
+  [class*="grid"]:not([class*="_sm-0"]) {
+    display: -webkit-box;
+    display: flex;
+  }
+  [class*="grid"] > [class*="_sm-0"],
+  [class*="grid"][class*="-equalHeight"] > [class*="_sm-0"] {
+    display: none;
   }
 }
 
-@media (min-width: 555px) {
-  .layout-swap__top {
-    position: absolute;
-    top: 0;
-    height: 48px;
-    width: 100%;
+@media screen and (max-width: 640px) {
+  [class*="grid"] > :not([class*="_xs-0"]) {
+    display: block;
+  }
+  [class*="grid"]:not([class*="_xs-0"]) {
+    display: -webkit-box;
+    display: flex;
+  }
+  [class*="grid"] > [class*="_xs-0"],
+  [class*="grid"][class*="-equalHeight"] > [class*="_xs-0"] {
+    display: none;
   }
 }
+
+/*# sourceMappingURL=layouts.css.map */
diff --git a/STARTERKIT/components/init/_variables.scss b/STARTERKIT/components/init/_variables.scss
index 7a7daf0..d556c8d 100644
--- a/STARTERKIT/components/init/_variables.scss
+++ b/STARTERKIT/components/init/_variables.scss
@@ -133,40 +133,22 @@ $rem-fallback:      false;
 // @include breakpoint-set('to ems', true);
 
 
-// Zen grids
+// Gridlex grids
 //
-// The default grid system is built using the Zen Grids sass module. Full
-// documentation is available on the [Zen Grids website](http://zengrids.com/).
+// http://gridlex.devlint.fr/
 //
-// Note: if you are more comfortable using another grid system, you can easily
-// remove Zen Grids and its layouts.
+// Other variables here: node_modules/gridlex/src/gridlex-vars.scss
 //
-// Style guide: sass.variables.zen-grids
-
-// These are needed for all breakpoints on all layouts.
-$zen-auto-include-grid-item-base: false;
-$zen-box-sizing: universal-border-box;
-
-// First we set the values we need for the mobile version of our layouts (the
-// version that does _not_ appear inside any @media queries.)
-$zen-columns: 1;
-$zen-gutters: 40px;
-
-// Then we set the values we need for each of the layouts at larger media query
-// sizes. Note how the names of the layouts match the names of our breakpoints
-// above. That allows a single zen-respond-to() to both use the proper item
-// from $zen-layouts and from $breakpoints.
-$zen-layouts: (
-  m: (
-    columns: 2,
-    // The gutters in the layouts are larger on mobile.
-    gutters: 25px,
-  ),
-  xl: (
-    columns: 3,
-    gutters: 25px,
-  ),
-);
+// Style guide: sass.variables.gridlex
+
+$gl-gutter: 1rem;
+
+$gl-xs:     'screen and (max-width: 640px)';
+$gl-sm:     'screen and (min-width: 641px) and (max-width: 992px)';
+$gl-md:     'screen and (min-width: 993px) and (max-width: 1200px)';
+$gl-lg:     'screen and (min-width: 1200px)';
+// TODO: add theme.breakpoints.yml file and dependency here
+
 
 // See $include-rtl below.
 $zen-rtl-selector: '[dir="rtl"]';
diff --git a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss b/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss
deleted file mode 100644
index 4206e6f..0000000
--- a/STARTERKIT/components/layouts/layout-3col/_layout-3col.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-// Responsive 3-column grid
-//
-// The `.layout-3col` layout is a responsive grid layout that is:
-// - 1 column at mobile sizes
-// - 2 columns at tablet sizes
-// - 3 columns at desktop sizes
-//
-// The `.layout-3col` class is used on the container div for the layout. A *grid
-// item* in the container can be created using one of the following classes:
-//
-// - `.layout-3col__full` : 3-column wide grid item; starts a new row
-// - `.layout-3col__left-content` : 2-column wide grid item, spanning columns 1
-//   and 2; starts a new row
-// - `.layout-3col__right-content` : 2-column wide grid item, spanning columns 2
-//   and 3; starts a new row
-// - `.layout-3col__left-sidebar` : 1-column wide grid item spanning column 1;
-//   starts a new row on tablet screens
-// - `.layout-3col__first-left-sidebar` : 1-column wide grid item spanning column 1;
-//   spans column 1 and starts a new row on tablet screens only
-// - `.layout-3col__second-left-sidebar` : 1-column wide grid item spanning column 1;
-//   spans column 2 on tablet screens only
-// - `.layout-3col__right-sidebar` : 1-column wide grid item spanning column 3;
-//   starts a new row on tablet screens
-// - `.layout-3col__col-1` : 1-column wide grid item spanning column 1; starts a
-//   new row
-// - `.layout-3col__col-2` : 1-column wide grid item spanning column 2
-// - `.layout-3col__col-3` : 1-column wide grid item spanning column 3; starts a
-//   new row on tablet screens
-// - `.layout-3col__col-4` : At tablet sizes, the `__col-x` grid items will form
-//   an irregular layout of 2 items in the first row and 1 item in the second
-//   row. The `__col-4` is a "hidden" item that does not appear on the
-//   large-screen 3-column grid, but is a 1-column wide grid item spanning
-//   column 2 on tablet screens.
-// - `.layout-3col__col-x` : 1-column wide grid item spanning column 1; when
-//   several of these are used inside a `.layout-3col__grid-item-container` or
-//   `.layout-3col`, the first one is positioned like `__col-1`, the
-//   second like `__col-2`, etc.
-//
-// There are 2 ways to do a nested grid:
-// 1. Place a grid container div inside a grid item. Just apply the normal
-//    classes to the nested grid container and its grid items.
-// 2. The grid item's div is also the grid container for the nested grid. In
-//    this case, the `.layout3-col__grid-item-container` class should be added
-//    to the div to ensure its nested grid items align with the parent grid.
-//
-// Markup: layout-3col.twig
-//
-// Style guide: layouts.layout-3col
-
-.layout-3col,
-%layout-3col {
-  // We set the context to flow, so that this container can be used in most
-  // places in the HTML, i.e. it must be nested inside something that has
-  // padding.
-  @include zen-grid-container($context: flow);
-
-  &__full,
-  &__left-content,
-  &__right-content,
-  &__left-sidebar,
-  &__right-sidebar,
-  &__first-left-sidebar,
-  &__second-left-sidebar,
-  &__col-1,
-  &__col-2,
-  &__col-3,
-  &__col-4,
-  &__col-x {
-    @include zen-new-row(both);
-    @include zen-grid-item-base();
-    @include zen-grid-item(1, 1);
-  }
-
-  @include zen-respond-to(m) {
-    // Since our container's context is "flow" and we changed the gutter size,
-    // we need to re-apply the container's negative left/right margins.
-    @include zen-grid-container($context: flow);
-
-    &__full,
-    &__left-content,
-    &__right-content,
-    &__left-sidebar,
-    &__right-sidebar {
-      @include zen-grid-item(2, 1);
-      // Since we changed the gutter size for this media query, we need to
-      // re-apply the padding to every grid item.
-      @include zen-apply-gutter-padding();
-    }
-
-    &__first-left-sidebar,
-    &__col-1,
-    &__col-3,
-    &__col-x:nth-child(2n + 1) {
-      @include zen-grid-item(1, 1);
-      @include zen-apply-gutter-padding();
-    }
-
-    &__second-left-sidebar,
-    &__col-2,
-    &__col-4,
-    &__col-x:nth-child(2n) {
-      // Since this inherits from the mobile layout, we have to explicitly turn
-      // off the new-row mixin.
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 2);
-      @include zen-apply-gutter-padding();
-    }
-  }
-
-  @include zen-respond-to(xl) {
-    &__full {
-      @include zen-grid-item(3, 1);
-    }
-
-    &__left-content {
-      @include zen-grid-item(2, 1);
-    }
-
-    &__right-content {
-      @include zen-grid-item(2, 2);
-    }
-
-    &__left-sidebar,
-    &__first-left-sidebar,
-    &__second-left-sidebar {
-      @include zen-new-row(right);
-      @include zen-grid-item(1, 3, right);
-    }
-
-    &__right-sidebar {
-      @include zen-new-row(right);
-      @include zen-grid-item(1, 1, right);
-    }
-
-    &__col-1,
-    &__col-x:nth-child(3n+1) {
-      @include zen-new-row(both);
-      @include zen-grid-item(1, 1);
-    }
-
-    &__col-2,
-    &__col-x:nth-child(3n+2) {
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 2);
-    }
-
-    &__col-3,
-    &__col-x:nth-child(3n) {
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 3);
-    }
-
-    &__col-4 {
-      display: none;
-    }
-  }
-
-  // Place last so it can override the padding of grid items.
-  &__grid-item-container {
-    @include zen-grid-container($context: grid-item);
-  }
-}
diff --git a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig b/STARTERKIT/components/layouts/layout-3col/layout-3col.twig
deleted file mode 100644
index 5c90ce7..0000000
--- a/STARTERKIT/components/layouts/layout-3col/layout-3col.twig
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="layout-3col {{modifier_class}}">
-  <div class="layout-3col__full">
-    The <code>.layout-3col__full</code> grid item.
-  </div>
-  <div class="layout-3col__left-content">
-    The <code>.layout-3col__left-content</code> grid item.
-  </div>
-  <div class="layout-3col__right-sidebar">
-    The <code>.layout-3col__right-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__right-content">
-    The <code>.layout-3col__right-content</code> grid item.
-  </div>
-  <div class="layout-3col__left-sidebar">
-    The <code>.layout-3col__left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__right-content">
-    The <code>.layout-3col__right-content</code> grid item.
-  </div>
-  <div class="layout-3col__first-left-sidebar">
-    The <code>.layout-3col__first-left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__second-left-sidebar">
-    The <code>.layout-3col__second-left-sidebar</code> grid item.
-  </div>
-  <div class="layout-3col__col-1">
-    The <code>.layout-3col__col-1</code> grid item.
-  </div>
-  <div class="layout-3col__col-2">
-    The <code>.layout-3col__col-2</code> grid item.
-  </div>
-  <div class="layout-3col__col-3">
-    The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
-  </div>
-  <div class="layout-3col__col-4">
-    The <code>.layout-3col__col-4</code> grid item.
-  </div>
-  <div class="layout-3col__full layout-3col__grid-item-container">
-    <div class="layout-3col__col-x">
-      The first <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The second <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The third <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-    <div class="layout-3col__col-x">
-      The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
-    </div>
-  </div>
-</div>
diff --git a/STARTERKIT/components/layouts/layout-center/_layout-center.scss b/STARTERKIT/components/layouts/layout-center/_layout-center.scss
deleted file mode 100644
index 846a321..0000000
--- a/STARTERKIT/components/layouts/layout-center/_layout-center.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-// Dependencies.
-// Allow layout-center's margin/padding to override layout-3col.
-@import 'layouts/layout-3col/layout-3col';
-
-// Layout Center
-//
-// All other layouts should be nested inside this centered layout to ensure that
-// content does not get too wide on very large screens.
-//
-// Applying a `.layout-*` class to the same HTML element as `.layout-center`
-// would cause that element's grid to mis-align with the rest of the grid on the
-// page, but this component will automatically detect the other `.layout-*`
-// class and automatically use the `.layout-center--shared-grid` variant
-// instead.
-//
-// .layout-center--shared-grid - If `.layout-center` is applied to the same div
-//   as another .layout-* class, then this variant should be used to prevent the
-//   shared layout's grid from mis-aligning. Note: Each time a new .layout-*
-//   component is created, this component will need to be modified.
-//
-// Markup: layout-center.twig
-//
-// Weight: -1
-//
-// Style guide: layouts.layout-center
-
-.layout-center,
-%layout-center {
-  @include zen-apply-gutter-padding();
-  margin: 0 auto;
-
-  // We wrap the max-width declaration with zen-layout() so we can see the value
-  // of $zen-gutters when it is at the larger "xl"-sized media query.
-  @include zen-layout(xl) {
-    // The max content width is 1140px (the container width minus the gutters.)
-    max-width: 1140px + $zen-gutters;
-  }
-
-  @include zen-respond-to(m) {
-    // Since we are using zen-respond-to(), the values in $zen-layouts will
-    // override the global value for $zen-gutters.
-    @include zen-apply-gutter-padding();
-  }
-
-  // Since .layout-center has overridden the negative margin on another
-  // .layout-* container, the grid children will be misaligned due to
-  // .layout-center's gutter padding. So we remove it.
-  &--shared-grid {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-//
-// Fugly selectors.
-//
-
-.layout-center {
-  // Ensure the .layout-center--shared-grid variant is automatically used by
-  // adding all other .layout-* classes here.
-  &.layout-3col {
-    @extend %layout-center--shared-grid;
-  }
-}
diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.json b/STARTERKIT/components/layouts/layout-center/layout-center.json
deleted file mode 100644
index 52ac132..0000000
--- a/STARTERKIT/components/layouts/layout-center/layout-center.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "content": "This layout-center component has content that is centered on larger screens."
-}
diff --git a/STARTERKIT/components/layouts/layout-center/layout-center.twig b/STARTERKIT/components/layouts/layout-center/layout-center.twig
deleted file mode 100644
index cc71f16..0000000
--- a/STARTERKIT/components/layouts/layout-center/layout-center.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="layout-center {{modifier_class}}">
-  {{ content }}
-</div>
diff --git a/STARTERKIT/components/layouts/layouts.scss b/STARTERKIT/components/layouts/layouts.scss
index 05a4f24..323c7e5 100644
--- a/STARTERKIT/components/layouts/layouts.scss
+++ b/STARTERKIT/components/layouts/layouts.scss
@@ -7,8 +7,18 @@
 //
 // Style guide: layouts
 
-@import 'layout-3col/layout-3col';
-@import 'layout-center/layout-center';
 // The layout-swap isn't used in page.html.twig. You may wish to remove it to
 // improve front-end performance.
 @import 'layout-swap/layout-swap';
+
+
+// Gridlex layouts
+//
+// Add the Gridlex flexbox library http://gridlex.devlint.fr/.
+// How it works?
+// The concept is simple:
+// you need to wrap your .col in a .grid.
+// That's all.
+//
+// Style guide: layouts.gridlex
+@import 'gridlex/src/gridlex';
diff --git a/STARTERKIT/components/style-guide/kss-only.scss b/STARTERKIT/components/style-guide/kss-only.scss
index 288b653..e31ed13 100644
--- a/STARTERKIT/components/style-guide/kss-only.scss
+++ b/STARTERKIT/components/style-guide/kss-only.scss
@@ -10,13 +10,3 @@
 [id^='kssref-layouts-'] [class^='layout-'][class*='__'] {
   outline: 1px dotted color('grey');
 }
-
-// Because our grids assume a container has some padding, add the standard
-// padding to the example wrapper.
-#kssref-layouts-layout-3column .kss-modifier__example {
-  @include zen-apply-gutter-padding();
-
-  @include zen-respond-to(m) {
-    @include zen-apply-gutter-padding();
-  }
-}
diff --git a/STARTERKIT/package.json b/STARTERKIT/package.json
index 68a6d55..120404a 100644
--- a/STARTERKIT/package.json
+++ b/STARTERKIT/package.json
@@ -10,6 +10,7 @@
     "chroma-sass": "^1.2.4",
     "del": "^2.2.0",
     "eslint": "^2.9.0",
+    "gridlex": "^2.3.1",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-cached": "^1.1.0",
diff --git a/STARTERKIT/templates/layout/maintenance-page.html.twig b/STARTERKIT/templates/layout/maintenance-page.html.twig
index a20cd5d..3ad2ea6 100644
--- a/STARTERKIT/templates/layout/maintenance-page.html.twig
+++ b/STARTERKIT/templates/layout/maintenance-page.html.twig
@@ -11,75 +11,56 @@
 #}
 
 {{ attach_library('STARTERKIT/layouts') }}
-<div class="layout-center">
-
-  <header class="header" role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-        {% if site_name %}
-         <h1 class="site-name">
-           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-         </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# /.name-and-slogan #}
-    {% endif %}
-
-  </header>
+<header class="header" role="banner">
+  <div class="col">
+    <div class="grid">
+      <div class="col-12_md-7_lg-3">
+        {{ page.header }}
+      </div>
+      <div class="col-12_md-5_lg-9">
+        {{ page.secondary_menu }}
+      </div>
+    </div>
+  </div>
+</header>
 
-  <div class="layout-3col">
+<div class="col">
+  <div class="grid">
 
     {# Decide on layout classes by checking if sidebars have content. #}
     {% if page.sidebar_first and page.sidebar_second %}
-      {% set content_class        = 'layout-3col__right-content' %}
-      {% set sidebar_first_class  = 'layout-3col__first-left-sidebar' %}
-      {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %}
+      {% set content_class        = 'col-12_md-4_lg-6' %}
+      {% set sidebar_first_class  = 'col-12_md-4_lg-3' %}
+      {% set sidebar_second_class = 'col-12_md-4_lg-3' %}
     {% elseif (page.sidebar_second) %}
-      {% set content_class        = 'layout-3col__left-content' %}
+      {% set content_class        = 'col-12_md-7_lg-9' %}
       {% set sidebar_first_class  = '' %}
-      {% set sidebar_second_class = 'layout-3col__right-sidebar' %}
+      {% set sidebar_second_class = 'col-12_md-7_lg-3' %}
     {% elseif (page.sidebar_first) %}
-      {% set content_class        = 'layout-3col__right-content' %}
-      {% set sidebar_first_class  = 'layout-3col__left-sidebar' %}
+      {% set content_class        = 'col-12_md-7_lg-9' %}
+      {% set sidebar_first_class  = 'col-12_md-5_lg-3' %}
       {% set sidebar_second_class = '' %}
     {% else %}
-      {% set content_class        = 'layout-3col__full' %}
+      {% set content_class        = 'col-12' %}
       {% set sidebar_first_class  = '' %}
       {% set sidebar_second_class = '' %}
     {% endif %}
 
-    {% if page.primary_menu %}
-      <div class="layout-3col__full">
-        {{ page.primary_menu }}
-      </div>
+    {% if page.sidebar_first %}
+      <aside class="{{ sidebar_first_class }}" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
     {% endif %}
 
     <main class="{{ content_class }}" role="main">
-
       {{ page.highlighted }}
+      {{ page.breadcrumb }}
       <a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-content">Back to top</a>{# link target is in html.html.twig #}
-      {% if title %}
-        <h1>{{ title }}</h1>
-      {% endif %}
+      {{ page.title }}
+      {{ page.help }}
       {{ page.content }}
-
     </main>
 
-    {% if page.sidebar_first %}
-      <aside class="{{ sidebar_first_class }}" role="complementary">
-        {{ page.sidebar_first }}
-      </aside>
-    {% endif %}
-
     {% if page.sidebar_second %}
       <aside class="{{ sidebar_second_class }}" role="complementary">
         {{ page.sidebar_second }}
@@ -87,9 +68,7 @@
     {% endif %}
 
   </div>
+</div>
 
-  {{ page.footer }}
-
-</div>{# /.layout-center #}
-
+{{ page.footer }}
 {{ page.bottom }}
diff --git a/STARTERKIT/templates/layout/page.html.twig b/STARTERKIT/templates/layout/page.html.twig
index dd4551f..aa92188 100644
--- a/STARTERKIT/templates/layout/page.html.twig
+++ b/STARTERKIT/templates/layout/page.html.twig
@@ -46,55 +46,60 @@
 #}
 
 {{ attach_library('STARTERKIT/layouts') }}
-<div class="layout-center">
+<header class="header" role="banner">
+  <div class="col">
+    <div class="grid">
+      <div class="col-12_md-7_lg-3">
+        {{ page.header }}
+      </div>
+      <div class="col-12_md-5_lg-9">
+        {{ page.secondary_menu }}
+      </div>
+    </div>
+  </div>
+</header>
 
-  <header class="header" role="banner">
-    {{ page.header }}
-    {{ page.secondary_menu }}
-  </header>
+<div class="col">
+  {{ page.primary_menu }}
+</div>
 
-  <div class="layout-3col">
+<div class="col">
+  <div class="grid">
 
     {# Decide on layout classes by checking if sidebars have content. #}
     {% if page.sidebar_first and page.sidebar_second %}
-      {% set content_class        = 'layout-3col__right-content' %}
-      {% set sidebar_first_class  = 'layout-3col__first-left-sidebar' %}
-      {% set sidebar_second_class = 'layout-3col__second-left-sidebar' %}
+      {% set content_class        = 'col-12_md-4_lg-6' %}
+      {% set sidebar_first_class  = 'col-12_md-4_lg-3' %}
+      {% set sidebar_second_class = 'col-12_md-4_lg-3' %}
     {% elseif (page.sidebar_second) %}
-      {% set content_class        = 'layout-3col__left-content' %}
+      {% set content_class        = 'col-12_md-7_lg-9' %}
       {% set sidebar_first_class  = '' %}
-      {% set sidebar_second_class = 'layout-3col__right-sidebar' %}
+      {% set sidebar_second_class = 'col-12_md-7_lg-3' %}
     {% elseif (page.sidebar_first) %}
-      {% set content_class        = 'layout-3col__right-content' %}
-      {% set sidebar_first_class  = 'layout-3col__left-sidebar' %}
+      {% set content_class        = 'col-12_md-7_lg-9' %}
+      {% set sidebar_first_class  = 'col-12_md-5_lg-3' %}
       {% set sidebar_second_class = '' %}
     {% else %}
-      {% set content_class        = 'layout-3col__full' %}
+      {% set content_class        = 'col-12' %}
       {% set sidebar_first_class  = '' %}
       {% set sidebar_second_class = '' %}
     {% endif %}
 
-    <div class="layout-3col__full">
-      {{ page.primary_menu }}
-    </div>
+    {% if page.sidebar_first %}
+      <aside class="{{ sidebar_first_class }}" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
 
     <main class="{{ content_class }}" role="main">
-
       {{ page.highlighted }}
       {{ page.breadcrumb }}
       <a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-content">Back to top</a>{# link target is in html.html.twig #}
       {{ page.title }}
       {{ page.help }}
       {{ page.content }}
-
     </main>
 
-    {% if page.sidebar_first %}
-      <aside class="{{ sidebar_first_class }}" role="complementary">
-        {{ page.sidebar_first }}
-      </aside>
-    {% endif %}
-
     {% if page.sidebar_second %}
       <aside class="{{ sidebar_second_class }}" role="complementary">
         {{ page.sidebar_second }}
@@ -102,9 +107,7 @@
     {% endif %}
 
   </div>
+</div>
 
-  {{ page.footer }}
-
-</div>{# /.layout-center #}
-
+{{ page.footer }}
 {{ page.bottom }}