Introduction of new spacing grid

__snapshots__/layout/_template.spec.js.snap

@@ -671,7 +671,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
     <div class="ons-phase-banner">
         <div class="ons-container">
-            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-top ons-grid-flex--no-wrap">
+            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
 
                     <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                         <strong class="ons-phase-banner__badge">BETA</strong>
@@ -827,7 +827,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
     <button type="button" class="ons-btn ons-u-d-no ons-js-toggle-services ons-btn--mobile ons-btn--neutral" aria-label="Toggle services menu" aria-controls="service-links" aria-expanded="false">
-    <span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
+    <span class="ons-btn__inner"><span class="ons-btn__text">Account</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
             <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"></path>
         </svg></span>
 
@@ -927,7 +927,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
     <button type="submit" class="ons-btn ons-u-d-no@xxs@l ons-btn--ghost-dark">
-    <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-exit">
+    <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-exit">
             <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)"></path>
             <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)"></path>
         </svg></span>
@@ -966,8 +966,8 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-    <button type="submit" class="ons-btn ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
-    <span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
+    <button type="submit" class="ons-btn ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost" aria-label="Toggle main menu" aria-controls="main-nav" aria-expanded="false">
+    <span class="ons-btn__inner"><span class="ons-btn__text">Menu</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
             <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"></path>
         </svg></span>
 
@@ -1102,15 +1102,15 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
     <button type="button" class="ons-btn ons-u-d-no ons-js-sub-navigation-button ons-btn--mobile ons-btn--dropdown" aria-label="Toggle Design system menu" aria-controls="sub-nav" aria-expanded="false">
-    <span class="ons-btn__inner"><span class="ons-btn__text">Design system</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
+    <span class="ons-btn__inner"><span class="ons-btn__text">Design system</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-chevron">
             <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)"></path>
         </svg></span>
 
 
 
     </button>
 
-            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="sub-nav--mobile" aria-hidden="true" aria-label="Section menu" data-analytics="header-section-navigation">
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs" id="sub-nav--mobile" aria-hidden="true" aria-label="Section menu" data-analytics="header-section-navigation">
                 <div class="ons-container ons-container--gutterless@xxs@l">
                     <ul class="ons-navigation__list ons-navigation__list--parent">
                         <li class="ons-navigation__item">
@@ -1155,7 +1155,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                                             <h3 class="ons-navigation__list-header">Ask users for...</h3>
 
-                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs">
 
                                                 <li class="ons-navigation__item ons-list__item ons-navigation__item--active">
                                                     <a class="ons-navigation__link ons-navigation__link--section" href="#access-codes">
@@ -1218,7 +1218,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                                             <h3 class="ons-navigation__list-header">Help users to...</h3>
 
-                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs">
 
                                                 <li class="ons-navigation__item ons-list__item">
                                                     <a class="ons-navigation__link ons-navigation__link--section" href="#0">
@@ -1358,7 +1358,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
     <button type="submit" class="ons-btn ons-btn--ghost">
-    <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg class="ons-icon ons-u-ml-xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-exit">
+    <span class="ons-btn__inner"><span class="ons-btn__text">Save and sign out</span><svg class="ons-icon ons-u-ml-2xs" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img" title="ons-icon-exit">
             <path d="M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z" transform="translate(-2 -2)"></path>
             <path d="M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z" transform="translate(-2 -2)"></path>
         </svg></span>
@@ -1447,7 +1447,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             </div>
 
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m ons-u-mt-m@xxs@m">
+                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@xxs@m">
 
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">About ONS</h2>
 
@@ -1516,7 +1516,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             </div>
 
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m ons-u-mt-m@xxs@m">
+                            <div class="ons-grid__col ons-col-4@m ons-u-mt-l@xxs@m">
 
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">Statistics</h2>
 
@@ -1594,7 +1594,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-                        <div class="ons-grid__col ons-u-mb-m">
+                        <div class="ons-grid__col ons-u-mb-l">
                             <hr class="ons-footer__hr">
                         </div>
 
@@ -1686,7 +1686,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
                             <!-- OGL -->
-                            <div class="ons-footer__license ons-u-mb-m"><svg class="ons-footer__ogl-img" xmlns="http://www.w3.org/2000/svg" width="50px" height="20px" viewBox="0 0 60 24" focusable="false" aria-hidden="true" role="img">
+                            <div class="ons-footer__license ons-u-mb-l"><svg class="ons-footer__ogl-img" xmlns="http://www.w3.org/2000/svg" width="50px" height="20px" viewBox="0 0 60 24" focusable="false" aria-hidden="true" role="img">
             <title>Open Government License logo</title>
             <path d="M51.7,17.5V0l-6.2,4v19.8h13.8v-6.2H51.7z M36.7,16.3c-1,0.9-2.4,1.4-3.8,1.4c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8c2,0,3.9,1.1,4.9,2.7L43,5.6C40.9,2.2,37.1,0,32.9,0c-4.5,0-8.4,2.5-10.4,6.1C20.4,2.5,16.5,0,12,0C5.4,0,0,5.4,0,12s5.4,12,12,12c4.5,0,8.4-2.5,10.4-6.1c2.1,3.6,6,6.1,10.4,6.1c3,0,5.8-1.1,7.9-3l2.4,2.7h0.4V13h-9.8L36.7,16.3zM12,17.8c-3.2,0-5.8-2.6-5.8-5.8S8.8,6.2,12,6.2s5.8,2.6,5.8,5.8S15.2,17.8,12,17.8" fill="#595959"></path>
         </svg>
@@ -1711,7 +1711,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-                        <div class="ons-footer__logo-container ons-u-mb-m ons-grid-flex ons-grid-flex--vertical-top">
+                        <div class="ons-footer__logo-container ons-u-mb-l ons-grid-flex ons-grid-flex--vertical-top">
                             <a class="ons-footer__logo-link" href="https://www.ons.gov.uk/">
         <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-footer-alt" role="img">
             <title id="ons-logo-en-footer-alt">