ISTWCMS-5898: improve appearance of L-shaped sections

src/patterns/03-layouts/layout/_layout.scss

@@ -643,6 +643,25 @@
               }
             }
           }
+          &--fourth {
+            @media(min-width: $screen-lg) {
+              &::before {
+                content: '';
+                position: absolute;
+                background-color: var(--layout-show-seperator-color);
+                width: var(--size-xs);
+                height: 100%;
+                top: 0;
+                left: 0;
+                transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+              }
+              // Fix height of separator when block has title showing (requires browser with :has support).
+              .uw-main &:has(.block > h2:first-child)::before {
+                height: calc(100% - 0.45em);
+                top: 0.45em;
+              }
+            }
+          }
         }
       }
       &--narrow {
@@ -708,6 +727,16 @@
                 right: 0;
                 transform: translate(var(--size-2), 0);
               }
+              &::after {
+                content: '';
+                position: absolute;
+                background-color: var(--layout-show-seperator-color);
+                width: var(--size-xs);
+                height: 100%;
+                bottom: 0;
+                left: 0;
+                transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+              }
             }
           }
           &--third {
@@ -727,6 +756,20 @@
               }
             }
           }
+          &--fourth {
+            @media(min-width: $screen-lg) {
+              &::before {
+                content: '';
+                position: absolute;
+                background-color: var(--layout-show-seperator-color);
+                width: var(--size-xs);
+                height: 100%;
+                bottom: 0;
+                left: 0;
+                transform: translate(calc((var(--size-2) * -1) - 1px), 0);
+              }
+            }
+          }
         }
       }
       &--narrow {