diff --git a/src/implementations/twig/components/language-list/__snapshots__/language-list.test.js.snap b/src/implementations/twig/components/language-list/__snapshots__/language-list.test.js.snap
index ae7d2d5d5e4..09b6735826f 100644
--- a/src/implementations/twig/components/language-list/__snapshots__/language-list.test.js.snap
+++ b/src/implementations/twig/components/language-list/__snapshots__/language-list.test.js.snap
@@ -12,10 +12,10 @@ exports[`Language List Overlay renders correctly 1`] = `
       class="ecl-language-list__container ecl-container"
     >
       <div
-        class="ecl-row"
+        class="ecl-language-list--overlay__header"
       >
         <div
-          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
         >
           <button
             class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -45,7 +45,7 @@ exports[`Language List Overlay renders correctly 1`] = `
           </button>
         </div>
         <div
-          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           id="ecl-language-list__title"
         >
           <svg
@@ -64,12 +64,12 @@ exports[`Language List Overlay renders correctly 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -246,7 +246,7 @@ exports[`Language List Overlay renders correctly 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -414,12 +414,12 @@ exports[`Language List Overlay renders correctly 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -430,11 +430,11 @@ exports[`Language List Overlay renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
                 rel="alternate"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -443,11 +443,11 @@ exports[`Language List Overlay renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
                 rel="alternate"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -456,17 +456,43 @@ exports[`Language List Overlay renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
                 rel="alternate"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+                rel="alternate"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+                rel="alternate"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -477,11 +503,11 @@ exports[`Language List Overlay renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
                 rel="alternate"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -490,11 +516,50 @@ exports[`Language List Overlay renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
+                rel="alternate"
+              >
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+                rel="alternate"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
                 rel="alternate"
               >
-                عَرَبِيّ
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
+                rel="alternate"
+              >
+                中文
               </a>
             </li>
           </ul>
@@ -519,10 +584,10 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
       class="ecl-language-list__container ecl-container"
     >
       <div
-        class="ecl-row"
+        class="ecl-language-list--overlay__header"
       >
         <div
-          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
         >
           <button
             class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -552,7 +617,7 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
           </button>
         </div>
         <div
-          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           id="ecl-language-list__title"
         >
           <svg
@@ -571,12 +636,12 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -753,7 +818,7 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -921,12 +986,12 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -937,11 +1002,11 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
                 rel="alternate"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -950,11 +1015,11 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
                 rel="alternate"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -963,17 +1028,43 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
                 rel="alternate"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+                rel="alternate"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+                rel="alternate"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -984,11 +1075,11 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
                 rel="alternate"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -997,11 +1088,50 @@ exports[`Language List Overlay renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
+                rel="alternate"
+              >
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+                rel="alternate"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
                 rel="alternate"
               >
-                عَرَبِيّ
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
+                rel="alternate"
+              >
+                中文
               </a>
             </li>
           </ul>
@@ -1024,10 +1154,10 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
       class="ecl-language-list__container ecl-container"
     >
       <div
-        class="ecl-row"
+        class="ecl-language-list--overlay__header"
       >
         <div
-          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
         >
           <button
             class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -1057,7 +1187,7 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
           </button>
         </div>
         <div
-          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           id="ecl-language-list__title"
         >
           <svg
@@ -1076,12 +1206,12 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -1258,7 +1388,7 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -1426,12 +1556,12 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -1442,11 +1572,11 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
                 rel="alternate"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -1455,11 +1585,11 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
                 rel="alternate"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -1468,17 +1598,43 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
                 rel="alternate"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+                rel="alternate"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+                rel="alternate"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -1489,11 +1645,11 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
                 rel="alternate"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -1502,11 +1658,50 @@ exports[`Language List Overlay renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
                 rel="alternate"
               >
-                عَرَبِيّ
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+                rel="alternate"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
+                rel="alternate"
+              >
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
+                rel="alternate"
+              >
+                中文
               </a>
             </li>
           </ul>
@@ -1538,12 +1733,12 @@ exports[`Language List Splash renders correctly 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -1708,7 +1903,7 @@ exports[`Language List Splash renders correctly 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -1864,12 +2059,12 @@ exports[`Language List Splash renders correctly 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -1880,10 +2075,10 @@ exports[`Language List Splash renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -1892,10 +2087,10 @@ exports[`Language List Splash renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -1904,16 +2099,40 @@ exports[`Language List Splash renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -1924,10 +2143,10 @@ exports[`Language List Splash renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -1936,10 +2155,46 @@ exports[`Language List Splash renders correctly 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
               >
-                عَرَبِيّ
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
+              >
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
+              >
+                中文
               </a>
             </li>
           </ul>
@@ -1973,12 +2228,12 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -2143,7 +2398,7 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -2299,12 +2554,12 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -2315,10 +2570,10 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -2327,10 +2582,10 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -2339,16 +2594,40 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -2359,10 +2638,10 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -2371,10 +2650,46 @@ exports[`Language List Splash renders correctly with extra attributes 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
+              >
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
+              >
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
               >
-                عَرَبِيّ
+                中文
               </a>
             </li>
           </ul>
@@ -2406,12 +2721,12 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
         class="ecl-row ecl-language-list__eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
-          EU official languages
+          Official EU languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -2576,7 +2891,7 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -2732,12 +3047,12 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
         class="ecl-row ecl-language-list__non-eu"
       >
         <div
-          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+          class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         >
           Other languages
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
         >
           <ul
             class="ecl-language-list__list"
@@ -2748,10 +3063,10 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="zh"
-                lang="zh"
+                hreflang="ar"
+                lang="ar"
               >
-                中文
+                العربية
               </a>
             </li>
             <li
@@ -2760,10 +3075,10 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="tr"
-                lang="tr"
+                hreflang="ca"
+                lang="ca"
               >
-                Türk
+                català
               </a>
             </li>
             <li
@@ -2772,16 +3087,40 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ru"
-                lang="ru"
+                hreflang="is"
+                lang="is"
               >
-                pусский
+                íslenska
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="lb"
+                lang="lb"
+              >
+                Lëtzebuergesch
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="ja"
+                lang="ja"
+              >
+                日本語
               </a>
             </li>
           </ul>
         </div>
         <div
-          class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+          class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
         >
           <ul
             class="ecl-language-list__list"
@@ -2792,10 +3131,10 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ca"
-                lang="ca"
+                hreflang="nb"
+                lang="nb"
               >
-                Català
+                norsk
               </a>
             </li>
             <li
@@ -2804,10 +3143,46 @@ exports[`Language List Splash renders correctly with extra class names 1`] = `
               <a
                 class="ecl-link ecl-link--standalone ecl-language-list__link"
                 href="/example"
-                hreflang="ar"
-                lang="ar"
+                hreflang="ru"
+                lang="ru"
               >
-                عَرَبِيّ
+                pусский
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="tr"
+                lang="tr"
+              >
+                türkçe
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="uk"
+                lang="uk"
+              >
+                украї́нська
+              </a>
+            </li>
+            <li
+              class="ecl-language-list__item"
+            >
+              <a
+                class="ecl-link ecl-link--standalone ecl-language-list__link"
+                href="/example"
+                hreflang="zh"
+                lang="zh"
+              >
+                中文
               </a>
             </li>
           </ul>
diff --git a/src/implementations/twig/components/language-list/language-list-grid.html.twig b/src/implementations/twig/components/language-list/language-list-grid.html.twig
index 984c8eb8ca8..2b6ad2948d4 100644
--- a/src/implementations/twig/components/language-list/language-list-grid.html.twig
+++ b/src/implementations/twig/components/language-list/language-list-grid.html.twig
@@ -29,10 +29,10 @@
 {# Print the result #}
 
 <div class="ecl-row ecl-language-list__{{ section }}">
-  <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2">
+  <div class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1">
     {{- category -}}
   </div>
-  <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2">
+  <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1">
     <ul class="ecl-language-list__list">
       {% for _item in _column1 %}
         {% set _item_class = 'ecl-language-list__item' %}
@@ -49,7 +49,7 @@
       {% endfor %}
     </ul>
   </div>
-  <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4">
+  <div class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5">
     <ul class="ecl-language-list__list">
       {% for _item in _column2 %}
         {% set _item_class = 'ecl-language-list__item' %}
diff --git a/src/implementations/twig/components/language-list/language-list.html.twig b/src/implementations/twig/components/language-list/language-list.html.twig
index b3890876ab3..116c979ffbe 100644
--- a/src/implementations/twig/components/language-list/language-list.html.twig
+++ b/src/implementations/twig/components/language-list/language-list.html.twig
@@ -73,8 +73,8 @@
 <div class="{{ _css_class }}" {{ _extra_attributes|raw }} {{ _data_lang_overlay }}>
 {% if _overlay %}
   <div class="ecl-language-list__container ecl-container">
-    <div class="ecl-row">
-      <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2">
+    <div class="ecl-language-list--overlay__header">
+      <div class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2">
         {% include '@ecl/button/button.html.twig' with {
           label: _close_label,
           variant: "ghost",
@@ -89,7 +89,7 @@
         } only %}
       </div>
       <div
-        class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+        class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
         id="ecl-language-list__title"
       >
         {% include '@ecl/icon/icon.html.twig' with {
diff --git a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
index d7bb65fedaf..50afc36b855 100644
--- a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
+++ b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
@@ -209,10 +209,10 @@ exports[`Site Header EC renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -242,7 +242,7 @@ exports[`Site Header EC renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -261,12 +261,12 @@ exports[`Site Header EC renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -443,7 +443,7 @@ exports[`Site Header EC renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -611,12 +611,12 @@ exports[`Site Header EC renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -663,7 +663,7 @@ exports[`Site Header EC renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -944,10 +944,10 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -977,7 +977,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -996,12 +996,12 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1178,7 +1178,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -1346,12 +1346,12 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1398,7 +1398,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -1649,10 +1649,10 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -1682,7 +1682,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -1701,12 +1701,12 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1883,7 +1883,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -2051,12 +2051,12 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -2103,7 +2103,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -2352,10 +2352,10 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -2385,7 +2385,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -2404,12 +2404,12 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -2586,7 +2586,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -2754,12 +2754,12 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -2806,7 +2806,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3047,10 +3047,10 @@ exports[`Site Header EU renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -3080,7 +3080,7 @@ exports[`Site Header EU renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -3099,12 +3099,12 @@ exports[`Site Header EU renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3281,7 +3281,7 @@ exports[`Site Header EU renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3449,12 +3449,12 @@ exports[`Site Header EU renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3501,7 +3501,7 @@ exports[`Site Header EU renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
diff --git a/src/implementations/twig/deprecated/site-header-core/__snapshots__/site-header-core.test.js.snap b/src/implementations/twig/deprecated/site-header-core/__snapshots__/site-header-core.test.js.snap
index 9af45ff3d1b..61798f868f6 100644
--- a/src/implementations/twig/deprecated/site-header-core/__snapshots__/site-header-core.test.js.snap
+++ b/src/implementations/twig/deprecated/site-header-core/__snapshots__/site-header-core.test.js.snap
@@ -1037,10 +1037,10 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -1070,7 +1070,7 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -1089,12 +1089,12 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1271,7 +1271,7 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -1439,12 +1439,12 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1491,7 +1491,7 @@ exports[`EC Site Header Core Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -2600,10 +2600,10 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -2633,7 +2633,7 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -2652,12 +2652,12 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -2834,7 +2834,7 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3002,12 +3002,12 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3054,7 +3054,7 @@ exports[`EC Site Header Core Default renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -4133,10 +4133,10 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -4166,7 +4166,7 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -4185,12 +4185,12 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -4367,7 +4367,7 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -4535,12 +4535,12 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -4587,7 +4587,7 @@ exports[`EC Site Header Core Default renders correctly with extra attributes 1`]
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -5664,10 +5664,10 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -5697,7 +5697,7 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -5716,12 +5716,12 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -5898,7 +5898,7 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -6066,12 +6066,12 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -6118,7 +6118,7 @@ exports[`EC Site Header Core Default renders correctly with extra class names 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -7370,10 +7370,10 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -7403,7 +7403,7 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -7422,12 +7422,12 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -7604,7 +7604,7 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -7772,12 +7772,12 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -7824,7 +7824,7 @@ exports[`EC Site Header Core Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -9078,10 +9078,10 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -9111,7 +9111,7 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -9130,12 +9130,12 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -9312,7 +9312,7 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -9480,12 +9480,12 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -9532,7 +9532,7 @@ exports[`EC Site Header Core Translated renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -10784,10 +10784,10 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -10817,7 +10817,7 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -10836,12 +10836,12 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11018,7 +11018,7 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -11186,12 +11186,12 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11238,7 +11238,7 @@ exports[`EC Site Header Core Translated renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -12315,10 +12315,10 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -12348,7 +12348,7 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -12367,12 +12367,12 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -12549,7 +12549,7 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -12717,12 +12717,12 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -12769,7 +12769,7 @@ exports[`EU Site Header Core Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -13878,10 +13878,10 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -13911,7 +13911,7 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -13930,12 +13930,12 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -14112,7 +14112,7 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -14280,12 +14280,12 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -14332,7 +14332,7 @@ exports[`EU Site Header Core Default renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -15411,10 +15411,10 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -15444,7 +15444,7 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -15463,12 +15463,12 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -15645,7 +15645,7 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -15813,12 +15813,12 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -15865,7 +15865,7 @@ exports[`EU Site Header Core Default renders correctly with extra attributes 1`]
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -16942,10 +16942,10 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -16975,7 +16975,7 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -16994,12 +16994,12 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -17176,7 +17176,7 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -17344,12 +17344,12 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -17396,7 +17396,7 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -18648,10 +18648,10 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -18681,7 +18681,7 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -18700,12 +18700,12 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -18882,7 +18882,7 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -19050,12 +19050,12 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -19102,7 +19102,7 @@ exports[`EU Site Header Core Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -20356,10 +20356,10 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -20389,7 +20389,7 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -20408,12 +20408,12 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -20590,7 +20590,7 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -20758,12 +20758,12 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -20810,7 +20810,7 @@ exports[`EU Site Header Core Translated renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -22062,10 +22062,10 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -22095,7 +22095,7 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -22114,12 +22114,12 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -22296,7 +22296,7 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -22464,12 +22464,12 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -22516,7 +22516,7 @@ exports[`EU Site Header Core Translated renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
diff --git a/src/implementations/twig/deprecated/site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap b/src/implementations/twig/deprecated/site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap
index a75f6de7e6a..1972541d36d 100644
--- a/src/implementations/twig/deprecated/site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap
+++ b/src/implementations/twig/deprecated/site-header-harmonised/__snapshots__/site-header-harmonised.test.js.snap
@@ -1256,10 +1256,10 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -1289,7 +1289,7 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -1308,12 +1308,12 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1490,7 +1490,7 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -1658,12 +1658,12 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1710,7 +1710,7 @@ exports[`Site Header Harmonised Group 1 renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3006,10 +3006,10 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -3039,7 +3039,7 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -3058,12 +3058,12 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3240,7 +3240,7 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3408,12 +3408,12 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3460,7 +3460,7 @@ exports[`Site Header Harmonised Group 1 renders correctly when logged in 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -4758,10 +4758,10 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -4791,7 +4791,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -4810,12 +4810,12 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -4992,7 +4992,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -5160,12 +5160,12 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -5212,7 +5212,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -6508,10 +6508,10 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -6541,7 +6541,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -6560,12 +6560,12 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -6742,7 +6742,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -6910,12 +6910,12 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -6962,7 +6962,7 @@ exports[`Site Header Harmonised Group 1 renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -8183,10 +8183,10 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -8216,7 +8216,7 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -8235,12 +8235,12 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -8417,7 +8417,7 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -8585,12 +8585,12 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -8637,7 +8637,7 @@ exports[`Site Header Harmonised Group 2 renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -9860,10 +9860,10 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -9893,7 +9893,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -9912,12 +9912,12 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -10094,7 +10094,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -10262,12 +10262,12 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -10314,7 +10314,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra attributes
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -11535,10 +11535,10 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -11568,7 +11568,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -11587,12 +11587,12 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11769,7 +11769,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -11937,12 +11937,12 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11989,7 +11989,7 @@ exports[`Site Header Harmonised Group 2 renders correctly with extra class names
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
diff --git a/src/implementations/twig/deprecated/site-header-standardised/__snapshots__/site-header-standardised.test.js.snap b/src/implementations/twig/deprecated/site-header-standardised/__snapshots__/site-header-standardised.test.js.snap
index 4043f35781d..a256a4ba8bb 100644
--- a/src/implementations/twig/deprecated/site-header-standardised/__snapshots__/site-header-standardised.test.js.snap
+++ b/src/implementations/twig/deprecated/site-header-standardised/__snapshots__/site-header-standardised.test.js.snap
@@ -1087,10 +1087,10 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -1120,7 +1120,7 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -1139,12 +1139,12 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1321,7 +1321,7 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -1489,12 +1489,12 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -1541,7 +1541,7 @@ exports[`EC Site Header Standardised Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -2700,10 +2700,10 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -2733,7 +2733,7 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -2752,12 +2752,12 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -2934,7 +2934,7 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -3102,12 +3102,12 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -3154,7 +3154,7 @@ exports[`EC Site Header Standardised Default renders correctly when logged in 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -4283,10 +4283,10 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -4316,7 +4316,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -4335,12 +4335,12 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -4517,7 +4517,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -4685,12 +4685,12 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -4737,7 +4737,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra attrib
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -5864,10 +5864,10 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -5897,7 +5897,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -5916,12 +5916,12 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -6098,7 +6098,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -6266,12 +6266,12 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -6318,7 +6318,7 @@ exports[`EC Site Header Standardised Default renders correctly with extra class
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -7620,10 +7620,10 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -7653,7 +7653,7 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -7672,12 +7672,12 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -7854,7 +7854,7 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -8022,12 +8022,12 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -8074,7 +8074,7 @@ exports[`EC Site Header Standardised Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -9378,10 +9378,10 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -9411,7 +9411,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -9430,12 +9430,12 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -9612,7 +9612,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -9780,12 +9780,12 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -9832,7 +9832,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra att
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -11134,10 +11134,10 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -11167,7 +11167,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -11186,12 +11186,12 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11368,7 +11368,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -11536,12 +11536,12 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -11588,7 +11588,7 @@ exports[`EC Site Header Standardised Translated renders correctly with extra cla
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -12715,10 +12715,10 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -12748,7 +12748,7 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -12767,12 +12767,12 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -12949,7 +12949,7 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -13117,12 +13117,12 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -13169,7 +13169,7 @@ exports[`EU Site Header Standardised Default renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -14328,10 +14328,10 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -14361,7 +14361,7 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -14380,12 +14380,12 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -14562,7 +14562,7 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -14730,12 +14730,12 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -14782,7 +14782,7 @@ exports[`EU Site Header Standardised Default renders correctly when logged in 1`
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -15911,10 +15911,10 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -15944,7 +15944,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -15963,12 +15963,12 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -16145,7 +16145,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -16313,12 +16313,12 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -16365,7 +16365,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra attrib
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -17492,10 +17492,10 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -17525,7 +17525,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -17544,12 +17544,12 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             EU official languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -17726,7 +17726,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -17894,12 +17894,12 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Non-EU languages
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -17946,7 +17946,7 @@ exports[`EU Site Header Standardised Default renders correctly with extra class
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -19248,10 +19248,10 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -19281,7 +19281,7 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -19300,12 +19300,12 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -19482,7 +19482,7 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -19650,12 +19650,12 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -19702,7 +19702,7 @@ exports[`EU Site Header Standardised Translated renders correctly 1`] = `
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -21006,10 +21006,10 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -21039,7 +21039,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -21058,12 +21058,12 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -21240,7 +21240,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -21408,12 +21408,12 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -21460,7 +21460,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra att
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -22762,10 +22762,10 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
         class="ecl-language-list__container ecl-container"
       >
         <div
-          class="ecl-row"
+          class="ecl-language-list--overlay__header"
         >
           <div
-            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__close ecl-col-12 ecl-col-l-8 ecl-col-m-11 ecl-offset-l-2"
           >
             <button
               class="ecl-button ecl-button--ghost ecl-language-list__close-button"
@@ -22795,7 +22795,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
             </button>
           </div>
           <div
-            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__title ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
             id="ecl-language-list__title"
           >
             <svg
@@ -22814,12 +22814,12 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
           class="ecl-row ecl-language-list__eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues officielles de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -22996,7 +22996,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
@@ -23164,12 +23164,12 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
           class="ecl-row ecl-language-list__non-eu"
         >
           <div
-            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2"
+            class="ecl-language-list__category ecl-col-12 ecl-col-l-8 ecl-offset-l-2 ecl-col-m-11 ecl-offset-m-1"
           >
             Langues hors de l'UE
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-offset-l-2 ecl-col-m-5 ecl-offset-m-1"
           >
             <ul
               class="ecl-language-list__list"
@@ -23216,7 +23216,7 @@ exports[`EU Site Header Standardised Translated renders correctly with extra cla
             </ul>
           </div>
           <div
-            class="ecl-language-list__column ecl-col-12 ecl-col-l-4"
+            class="ecl-language-list__column ecl-col-12 ecl-col-l-4 ecl-col-m-5"
           >
             <ul
               class="ecl-language-list__list"
diff --git a/src/implementations/vanilla/components/language-list/_language-list.scss b/src/implementations/vanilla/components/language-list/_language-list.scss
index 9bd1f087bca..74ce264b043 100644
--- a/src/implementations/vanilla/components/language-list/_language-list.scss
+++ b/src/implementations/vanilla/components/language-list/_language-list.scss
@@ -20,11 +20,16 @@ $_outline-link-focus: null !default;
 $_color-link-active: null !default;
 $_color-link-hover: null !default;
 $_color-title: null !default;
+$_container-padding-desktop: null !default;
+$_header-padding-desktop: null !default;
+$_header-padding-mobile: null !default;
+$_logo-height-mobile: null !default;
+$_logo-width-mobile: null !default;
 $_logo-height-desktop: null !default;
 $_logo-width-desktop: null !default;
-$_logo-height-mobile: 3.75rem;
-$_logo-width-mobile: 5.625rem;
 $_padding-list-splash-desktop: null !default;
+$_title_margin-bottom-desktop: null !default;
+$_title_margin-top-desktop: null !default;
 
 .ecl-language-list {
   background-color: $_background-container;
@@ -61,7 +66,7 @@ $_padding-list-splash-desktop: null !default;
 }
 
 .ecl-language-list__non-eu {
-  margin-top: map.get(theme.$spacing, 'l');
+  margin-top: map.get(theme.$spacing, 'xl');
 }
 
 .ecl-language-list__item {
@@ -77,6 +82,7 @@ $_padding-list-splash-desktop: null !default;
 .ecl-language-list__close-button:focus,
 .ecl-language-list__close-button:active {
   color: $_color-title;
+  padding: 0;
 }
 
 .ecl-language-list__link {
@@ -114,18 +120,6 @@ $_padding-list-splash-desktop: null !default;
   }
 }
 
-/* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
-  .ecl-language-list__logo {
-    height: $_logo-height-desktop;
-    width: $_logo-width-desktop;
-  }
-
-  .ecl-language-list__column + .ecl-language-list__column {
-    margin-top: 0;
-  }
-}
-
 /*
  * Splash only
  */
@@ -133,8 +127,8 @@ $_padding-list-splash-desktop: null !default;
   padding: 0;
 
   .ecl-language-list__container {
-    padding-bottom: map.get(theme.$spacing, '2xl');
-    padding-top: map.get(theme.$spacing, '2xl');
+    padding-bottom: map.get(theme.$spacing, 'xl');
+    padding-top: map.get(theme.$spacing, 'xl');
   }
 }
 
@@ -142,7 +136,7 @@ $_padding-list-splash-desktop: null !default;
   background-color: $_background-header;
   display: flex;
   justify-content: center;
-  padding: map.get(theme.$spacing, 'xl') 0;
+  padding: $_header-padding-mobile;
 }
 
 .ecl-language-list__logo {
@@ -151,9 +145,13 @@ $_padding-list-splash-desktop: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
-  .ecl-language-list--splash {
-    padding: $_padding-list-splash-desktop;
+@include breakpoints.up('m') {
+  .ecl-language-list__column + .ecl-language-list__column {
+    margin-top: 0;
+  }
+
+  .ecl-language-list__header {
+    padding: $_header-padding-desktop;
   }
 
   .ecl-language-list__container {
@@ -165,6 +163,15 @@ $_padding-list-splash-desktop: null !default;
     height: $_logo-height-desktop;
     width: $_logo-width-desktop;
   }
+
+  .ecl-language-list--splash {
+    padding: $_padding-list-splash-desktop;
+
+    .ecl-language-list__container {
+      padding-bottom: $_container-padding-desktop;
+      padding-top: $_container-padding-desktop;
+    }
+  }
 }
 
 /*
@@ -181,10 +188,27 @@ $_padding-list-splash-desktop: null !default;
   .ecl-language-list__container {
     height: 100%;
     overflow-y: auto;
-    padding-bottom: map.get(theme.$spacing, 'l');
-    padding-top: map.get(theme.$spacing, 'l');
+    padding-bottom: map.get(theme.$spacing, 'm');
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: map.get(theme.$spacing, 'm');
     width: 100%;
   }
+
+  .ecl-language-list--overlay__header,
+  .ecl-language-list__eu,
+  .ecl-language-list__non-eu {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1140px;
+  }
+}
+
+@include breakpoints.between(s, s) {
+  .ecl-language-list--overlay .ecl-language-list__container {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
 }
 
 .ecl-language-list__close {
@@ -208,9 +232,14 @@ $_padding-list-splash-desktop: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
+  .ecl-language-list__title {
+    margin-bottom: $_title_margin-bottom-desktop;
+    margin-top: $_title_margin-top-desktop;
+  }
+
   .ecl-language-list--overlay {
     .ecl-language-list__container {
-      padding-bottom: map.get(theme.$spacing, 'xl');
+      padding-bottom: map.get(theme.$spacing, '4xl');
       padding-top: map.get(theme.$spacing, 'xl');
     }
   }
diff --git a/src/implementations/vanilla/components/language-list/language-list-ec.scss b/src/implementations/vanilla/components/language-list/language-list-ec.scss
index 823135bc564..3a6b9ece74b 100644
--- a/src/implementations/vanilla/components/language-list/language-list-ec.scss
+++ b/src/implementations/vanilla/components/language-list/language-list-ec.scss
@@ -10,7 +10,14 @@
   $_color-link-active: map.get(theme.$color, 'black-100'),
   $_color-link-hover: map.get(theme.$color, 'blue-130'),
   $_color-title: map.get(theme.$color, 'white-100'),
-  $_logo-width-desktop: 8.25rem,
-  $_logo-height-desktop: 5.5rem,
-  $_padding-list-splash-desktop: 0
+  $_container-padding-desktop: map.get(theme.$spacing, '4xl'),
+  $_header-padding-desktop: map.get(theme.$spacing, 'l') 0,
+  $_header-padding-mobile: map.get(theme.$spacing, 'm') 0,
+  $_logo-width-desktop: 11.5rem,
+  $_logo-height-desktop: 5.75rem,
+  $_logo-height-mobile: 4.75rem,
+  $_logo-width-mobile: 9.5rem,
+  $_padding-list-splash-desktop: 0,
+  $_title-margin-bottom-desktop: map.get(theme.$spacing, '4xl'),
+  $_title-margin-top-desktop: map.get(theme.$spacing, '2xl')
 );
diff --git a/src/implementations/vanilla/components/language-list/language-list-eu.scss b/src/implementations/vanilla/components/language-list/language-list-eu.scss
index 389b7f778e1..43d289f6f2e 100644
--- a/src/implementations/vanilla/components/language-list/language-list-eu.scss
+++ b/src/implementations/vanilla/components/language-list/language-list-eu.scss
@@ -6,11 +6,18 @@
   $_border-link: 2px solid map.get(theme.$color, 'blue'),
   $_border-link-active: 2px solid map.get(theme.$color, 'yellow'),
   $_border-link-focus: 2px solid map.get(theme.$color, 'accent-blue-100'),
+  $_container-padding-desktop: map.get(theme.$spacing, 'xl'),
   $_outline-link-focus: 0,
   $_color-link-active: map.get(theme.$color, 'grey-140'),
   $_color-link-hover: map.get(theme.$color, 'blue-140'),
   $_color-title: map.get(theme.$color, 'blue'),
-  $_logo-width-desktop: 5.625rem,
-  $_logo-height-desktop: 3.75rem,
-  $_padding-list-splash-desktop: map.get(theme.$spacing, 'l') 0
+  $_header-padding-desktop: map.get(theme.$spacing, 'xl') 0,
+  $_header-padding-mobile: map.get(theme.$spacing, 'l') 0,
+  $_logo-width-mobile: 5.375rem,
+  $_logo-height-mobile: 3.75rem,
+  $_logo-width-desktop: 7.125rem,
+  $_logo-height-desktop: 4.75rem,
+  $_padding-list-splash-desktop: map.get(theme.$spacing, 'l') 0,
+  $_title-margin-bottom-desktop: map.get(theme.$spacing, 'xl'),
+  $_title-margin-top-desktop: map.get(theme.$spacing, '2xl')
 );
diff --git a/src/specs/components/language-list/demo/data--overlay.js b/src/specs/components/language-list/demo/data--overlay.js
index ccf13eb0a97..b73eda52742 100644
--- a/src/specs/components/language-list/demo/data--overlay.js
+++ b/src/specs/components/language-list/demo/data--overlay.js
@@ -129,14 +129,34 @@ module.exports = {
   overlay: true,
   non_eu_items: [
     {
-      label: '中文',
+      label: 'العربية',
       path: exampleLink,
-      lang: 'zh',
+      lang: 'ar',
     },
     {
-      label: 'Türk',
+      label: 'català',
       path: exampleLink,
-      lang: 'tr',
+      lang: 'ca',
+    },
+    {
+      label: 'íslenska',
+      path: exampleLink,
+      lang: 'is',
+    },
+    {
+      label: 'Lëtzebuergesch',
+      path: exampleLink,
+      lang: 'lb',
+    },
+    {
+      label: '日本語',
+      path: exampleLink,
+      lang: 'ja',
+    },
+    {
+      label: 'norsk',
+      path: exampleLink,
+      lang: 'nb',
     },
     {
       label: 'pусский',
@@ -144,17 +164,22 @@ module.exports = {
       lang: 'ru',
     },
     {
-      label: 'Català',
+      label: 'türkçe',
       path: exampleLink,
-      lang: 'ca',
+      lang: 'tr',
     },
     {
-      label: 'عَرَبِيّ',
+      label: 'украї́нська',
       path: exampleLink,
-      lang: 'ar',
+      lang: 'uk',
+    },
+    {
+      label: '中文',
+      path: exampleLink,
+      lang: 'zh',
     },
   ],
-  eu_category: 'EU official languages',
+  eu_category: 'Official EU languages',
   non_eu_category: 'Other languages',
   icon_path: '/icons.svg',
   close_label: 'Close',
diff --git a/src/specs/components/language-list/demo/data--splash.js b/src/specs/components/language-list/demo/data--splash.js
index 7d69004dd65..b945f70b368 100644
--- a/src/specs/components/language-list/demo/data--splash.js
+++ b/src/specs/components/language-list/demo/data--splash.js
@@ -128,14 +128,34 @@ module.exports = {
   overlay: false,
   non_eu_items: [
     {
-      label: '中文',
+      label: 'العربية',
       path: exampleLink,
-      lang: 'zh',
+      lang: 'ar',
     },
     {
-      label: 'Türk',
+      label: 'català',
       path: exampleLink,
-      lang: 'tr',
+      lang: 'ca',
+    },
+    {
+      label: 'íslenska',
+      path: exampleLink,
+      lang: 'is',
+    },
+    {
+      label: 'Lëtzebuergesch',
+      path: exampleLink,
+      lang: 'lb',
+    },
+    {
+      label: '日本語',
+      path: exampleLink,
+      lang: 'ja',
+    },
+    {
+      label: 'norsk',
+      path: exampleLink,
+      lang: 'nb',
     },
     {
       label: 'pусский',
@@ -143,17 +163,22 @@ module.exports = {
       lang: 'ru',
     },
     {
-      label: 'Català',
+      label: 'türkçe',
       path: exampleLink,
-      lang: 'ca',
+      lang: 'tr',
     },
     {
-      label: 'عَرَبِيّ',
+      label: 'украї́нська',
       path: exampleLink,
-      lang: 'ar',
+      lang: 'uk',
+    },
+    {
+      label: '中文',
+      path: exampleLink,
+      lang: 'zh',
     },
   ],
-  eu_category: 'EU official languages',
+  eu_category: 'Official EU languages',
   non_eu_category: 'Other languages',
   icon_path: '/icons.svg',
   logo: {