ISTWCMS-4051: updating stylings for 5 column layout

css/styles.css

@@ -1718,23 +1718,32 @@ svg:not(:root) {
     padding: 0;
     width: 100%; }
 
-.layout--fivecol-section .layout-builder__region {
-  display: inline-block; }
-
-.layout--fivecol-section .layout__region--first {
-  width: 23%; }
-
-.layout--fivecol-section .layout__region--second {
-  width: 18%; }
-
-.layout--fivecol-section .layout__region--third {
-  width: 18%; }
-
-.layout--fivecol-section .layout__region--fourth {
-  width: 18%; }
-
-.layout--fivecol-section .layout__region--fifth {
-  width: 20%; }
+.layout--uwfivecol {
+  display: grid; }
+  .layout--uwfivecol.even-split {
+    grid-template-columns: 20% 20% 20% 20% 20%; }
+  .layout--uwfivecol.larger-left {
+    grid-template-columns: 40% 15% 15% 15% 15%; }
+  .layout--uwfivecol.larger-second {
+    grid-template-columns: 15% 40% 15% 15% 15%; }
+  .layout--uwfivecol.larger-third {
+    grid-template-columns: 15% 15% 40% 15% 15%; }
+  .layout--uwfivecol.larger-fourth {
+    grid-template-columns: 15% 15% 15% 40% 15%; }
+  .layout--uwfivecol.larger-right {
+    grid-template-columns: 15% 15% 15% 15% 40%; }
+  .layout--uwfivecol.legacy-23-19-19-19-20 {
+    grid-template-columns: 23% 19% 19% 19% 20%; }
+  .layout--uwfivecol .layout__region--first {
+    grid-column: 1 / 2; }
+  .layout--uwfivecol .layout__region--second {
+    grid-column: 2 / 3; }
+  .layout--uwfivecol .layout__region--third {
+    grid-column: 3 / 4; }
+  .layout--uwfivecol .layout__region--fourth {
+    grid-column: 4 / 5; }
+  .layout--uwfivecol .layout__region--fifth {
+    grid-column: 5 / 6; }
 
 .layout--uwfourcol {
   display: grid; }

source/_patterns/03-layouts/layout/layout--fivecol/_layout--fivecol.scss

-.layout--fivecol-section {
-  .layout-builder__region {
-    display: inline-block;
+.layout--uwfivecol {
+  display: grid;
+
+  &.even-split {
+    grid-template-columns: 20% 20% 20% 20% 20%;
+  }
+
+  &.larger-left {
+    grid-template-columns: 40% 15% 15% 15% 15%;
+  }
+
+  &.larger-second {
+    grid-template-columns: 15% 40% 15% 15% 15%;
+  }
+
+  &.larger-third {
+    grid-template-columns: 15% 15% 40% 15% 15%;
+  }
+
+  &.larger-fourth {
+    grid-template-columns: 15% 15% 15% 40% 15%;
+  }
+
+  &.larger-right {
+    grid-template-columns: 15% 15% 15% 15% 40%;
+  }
+
+  &.legacy-23-19-19-19-20 {
+    grid-template-columns: 23% 19% 19% 19% 20%;
   }
 
   .layout__region--first {
-    width: 23%;
+    grid-column: 1 / 2;
   }
 
   .layout__region--second {
-    width: 18%
+    grid-column: 2 / 3;
   }
 
   .layout__region--third {
-    width: 18%;
+    grid-column: 3 / 4;
   }
 
   .layout__region--fourth {
-    width: 18%;
+    grid-column: 4 / 5;
   }
 
   .layout__region--fifth {
-    width: 20%;
+    grid-column: 5 / 6;
   }
 }
\ No newline at end of file

source/_patterns/03-layouts/layout/layout--fivecol/layout--fivecol.twig

 {%
   set classes = [
   'layout',
-  'layout--uwfourcol',
+  'layout--uwfivecol',
   column_class,
 ]
 %}