ISTWCMS-4084: adding inverted L right layout

css/styles.css

@@ -1765,6 +1765,27 @@ svg:not(:root) {
 .layout--uwfourcol.legacy-23-27-27-23 {
   grid-template-columns: 23% 27% 27% 23%; }
 
+.layout--invertedlright {
+  display: grid; }
+  .layout--invertedlright.even-split {
+    grid-template-columns: 25% 25% 50%; }
+  .layout--invertedlright.larger-left {
+    grid-template-columns: 33.5% 16.5% 50%; }
+  .layout--invertedlright.larger-right {
+    grid-template-columns: 16.5% 33.5% 50%; }
+  .layout--invertedlright .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--invertedlright .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--invertedlright .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
+  .layout--invertedlright .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3; }
+
 .layout--uwfourcol {
   display: grid;
   grid-template-columns: 100%; }

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

+.layout--invertedlright {
+  display: grid;
+
+  &.even-split {
+    grid-template-columns: 25% 25% 50%;
+  }
+
+  &.larger-left {
+    grid-template-columns: 33.5% 16.5% 50%;
+  }
+
+  &.larger-right {
+    grid-template-columns: 16.5% 33.5% 50%;
+  }
+
+  .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+
+  .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+  }
+
+}
\ No newline at end of file

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

+{%
+  set classes = [
+  'layout',
+  'layout--invertedlright',
+  column_class,
+]
+%}
+
+<section{{ attributes.addClass(classes) }}>
+
+  <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+    {% block content_first %}
+      Layout Region Column one
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+    {% block content_second %}
+      Layout Region Column two
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+    {% block content_third %}
+      Layout Region Column three
+    {% endblock %}
+  </div>
+
+  <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
+    {% block content_fourth %}
+      Layout Region Column four
+    {% endblock %}
+  </div>
+
+</section>