diff --git a/css/styles.css b/css/styles.css
index 3e2784e52c8fff4967825c9a4670d782c9356bcc..b166c12659d17371a7fdbf51adf05a8b8e16ee1e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2058,201 +2058,271 @@ svg:not(:root) {
   grid-column: 1 / 2; }
 
 .layout--uw-2-col {
-  display: grid; }
-
-.layout--uw-2-col.larger-left {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-2-col.larger-right {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-2-col.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-2-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-2-col .layout__region--second {
-  grid-column: 2 / 3; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-2-col.larger-left {
+      grid-template-columns: 67% 33%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-2-col.larger-right {
+      grid-template-columns: 33% 67%; } }
+  .layout--uw-2-col.even-split {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-2-col.even-split {
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-2-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-2-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2/ 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-2-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
 
 .layout--uw-3-col {
   display: grid; }
-
-.layout--uw-3-col.even-split {
-  grid-template-columns: 33% 34% 33%; }
-
-.layout--uw-3-col.larger-left {
-  grid-template-columns: 50% 25% 25%; }
-
-.layout--uw-3-col.larger-middle {
-  grid-template-columns: 25% 50% 25%; }
-
-.layout--uw-3-col.larger-right {
-  grid-template-columns: 25% 25% 50%; }
-
-.layout--uw-3-col.legacy-38-38-24 {
-  grid-template-columns: 38% 38% 24%; }
-
-.layout--uw-3-col.legacy-24-38-38 {
-  grid-template-columns: 24% 38% 38%; }
-
-.layout--uw-3-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-3-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-3-col .layout__region--third {
-  grid-column: 3 / 4; }
+  .layout--uw-3-col.even-split {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.even-split {
+        grid-template-columns: 33% 34% 33%; } }
+  .layout--uw-3-col.larger-left {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-left {
+        grid-template-columns: 50% 25% 25%; } }
+  .layout--uw-3-col.larger-middle {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-middle {
+        grid-template-columns: 25% 50% 25%; } }
+  .layout--uw-3-col.larger-right {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-right {
+        grid-template-columns: 25% 25% 50%; } }
+  .layout--uw-3-col.legacy-38-38-24 {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.legacy-38-38-24 {
+        grid-template-columns: 38% 38% 24%; } }
+  .layout--uw-3-col.legacy-24-38-38 {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.legacy-24-38-38 {
+        grid-template-columns: 24% 38% 38%; } }
+  .layout--uw-3-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-3-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-3-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
 
 .layout--uw-4-col {
-  display: grid; }
-
-.layout--uw-4-col.even-split {
-  grid-template-columns: 25% 25% 25% 25%; }
-
-.layout--uw-4-col.larger-left {
-  grid-template-columns: 50% 16.67% 16.67% 16.66%; }
-
-.layout--uw-4-col.larger-second {
-  grid-template-columns: 16.67% 50% 16.67% 16.66%; }
-
-.layout--uw-4-col.larger-third {
-  grid-template-columns: 16.67% 16.67% 50% 16.66%; }
-
-.layout--uw-4-col.larger-right {
-  grid-template-columns: 16.67% 16.67% 16.66% 50%; }
-
-.layout--uw-4-col.legacy-23-27-27-23 {
-  grid-template-columns: 23% 27% 27% 23%; }
-
-.layout--uw-4-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-4-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-4-col .layout__region--third {
-  grid-column: 3 / 4; }
-
-.layout--uw-4-col .layout__region--fourth {
-  grid-column: 4 / 5; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.even-split {
+      grid-template-columns: 25% 25% 25% 25%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-left {
+      grid-template-columns: 50% 16.67% 16.67% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-second {
+      grid-template-columns: 16.67% 50% 16.67% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-third {
+      grid-template-columns: 16.67% 16.67% 50% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-right {
+      grid-template-columns: 16.67% 16.67% 16.66% 50%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.legacy-23-27-27-23 {
+      grid-template-columns: 23% 27% 27% 23%; } }
+  .layout--uw-4-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-4-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-4-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
+  .layout--uw-4-col .layout__region--fourth {
+    grid-column: 1 / 2;
+    grid-row: 4 / 5; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--fourth {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2; } }
 
 .layout--uw-5-col {
-  display: grid; }
-
-.layout--uw-5-col.even-split {
-  grid-template-columns: 20% 20% 20% 20% 20%; }
-
-.layout--uw-5-col.larger-left {
-  grid-template-columns: 40% 15% 15% 15% 15%; }
-
-.layout--uw-5-col.larger-second {
-  grid-template-columns: 15% 40% 15% 15% 15%; }
-
-.layout--uw-5-col.larger-third {
-  grid-template-columns: 15% 15% 40% 15% 15%; }
-
-.layout--uw-5-col.larger-fourth {
-  grid-template-columns: 15% 15% 15% 40% 15%; }
-
-.layout--uw-5-col.larger-right {
-  grid-template-columns: 15% 15% 15% 15% 40%; }
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
-  grid-template-columns: 23% 19% 19% 19% 20%; }
-
-.layout--uw-5-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-5-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-5-col .layout__region--third {
-  grid-column: 3 / 4; }
-
-.layout--uw-5-col .layout__region--fourth {
-  grid-column: 4 / 5; }
-
-.layout--uw-5-col .layout__region--fifth {
-  grid-column: 5 / 6; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.even-split {
+      grid-template-columns: 20% 20% 20% 20% 20%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-left {
+      grid-template-columns: 40% 15% 15% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-second {
+      grid-template-columns: 15% 40% 15% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-third {
+      grid-template-columns: 15% 15% 40% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-fourth {
+      grid-template-columns: 15% 15% 15% 40% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-right {
+      grid-template-columns: 15% 15% 15% 15% 40%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.legacy-23-19-19-19-20 {
+      grid-template-columns: 23% 19% 19% 19% 20%; } }
+  .layout--uw-5-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-5-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--fourth {
+    grid-column: 1 / 2;
+    grid-row: 4 / 5; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--fourth {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--fifth {
+    grid-column: 1 / 2;
+    grid-row: 5 / 6; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--fifth {
+        grid-column: 5 / 6;
+        grid-row: 1 / 2; } }
 
 .layout--uw-inverted-l-left {
-  display: grid; }
-
-.layout--uw-inverted-l-left.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-left.larger-left {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-inverted-l-left.larger-right {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-inverted-l-left .uw-inverted-l--left-side {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .uw-inverted-l--right-side {
   display: grid;
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-left .layout__region--second {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .layout__region--third {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .layout__region--fourth {
-  grid-column: 1 / 3;
-  grid-row: 2 / 3; }
+  grid-template-columns: 100%; }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.even-split {
+      grid-template-columns: 50% 50%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.larger-left {
+      grid-template-columns: 33% 67%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.larger-right {
+      grid-template-columns: 67% 33%; } }
+  .layout--uw-inverted-l-left .uw-inverted-l--left-side {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .uw-inverted-l--right-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-left .uw-inverted-l--right-side {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-inverted-l-left .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .layout__region--third {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .layout__region--fourth {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
 
 .layout--uw-inverted-l-right {
-  display: grid; }
-
-.layout--uw-inverted-l-right.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-right.larger-left {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-inverted-l-right.larger-right {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-inverted-l-right .uw-inverted-l--left-side {
   display: grid;
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-right .uw-inverted-l--right-side {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-right .layout__region--first {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-right .layout__region--second {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
+  grid-template-columns: 100%; }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.even-split {
+      grid-template-columns: 50% 50%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.larger-left {
+      grid-template-columns: 33% 67%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.larger-right {
+      grid-template-columns: 67% 33%; } }
+  .layout--uw-inverted-l-right .uw-inverted-l--left-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-right .uw-inverted-l--left-side {
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-inverted-l-right .uw-inverted-l--right-side {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-right .uw-inverted-l--right-side {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-inverted-l-right .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-right .layout__region--second {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-right .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
 
-.layout--uw-inverted-l-right .layout__region--third {
-  grid-column: 1 / 3;
-  grid-row: 2 / 3; }
+.layout-builder .layout__region {
+  outline: 2px dashed #2f91da; }
 
-.layout__region {
+.pattern-lab-content .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;
   text-align: center; }
+  .pattern-lab-content .layout__region .pl-labels {
+    text-align: center; }
 
 .pl-layout-h2 {
-  padding: 1rem 0;
-  text-align: center; }
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 75rem;
+  padding: 0 16px; }
+  @media (min-width: 75rem) {
+    .pl-layout-h2 {
+      padding-left: 0;
+      padding-right: 0; } }
 
 .l-media {
   display: flex;
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index c0c1afb8035defbfa99777a18709b86cd1bd5de8..79a4fa0d4fcdf5a0e2af85fdae9fa4f08601dcba 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -479,198 +479,268 @@
   grid-column: 1 / 2; }
 
 .layout--uw-2-col {
-  display: grid; }
-
-.layout--uw-2-col.larger-left {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-2-col.larger-right {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-2-col.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-2-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-2-col .layout__region--second {
-  grid-column: 2 / 3; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-2-col.larger-left {
+      grid-template-columns: 67% 33%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-2-col.larger-right {
+      grid-template-columns: 33% 67%; } }
+  .layout--uw-2-col.even-split {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-2-col.even-split {
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-2-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-2-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2/ 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-2-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
 
 .layout--uw-3-col {
   display: grid; }
-
-.layout--uw-3-col.even-split {
-  grid-template-columns: 33% 34% 33%; }
-
-.layout--uw-3-col.larger-left {
-  grid-template-columns: 50% 25% 25%; }
-
-.layout--uw-3-col.larger-middle {
-  grid-template-columns: 25% 50% 25%; }
-
-.layout--uw-3-col.larger-right {
-  grid-template-columns: 25% 25% 50%; }
-
-.layout--uw-3-col.legacy-38-38-24 {
-  grid-template-columns: 38% 38% 24%; }
-
-.layout--uw-3-col.legacy-24-38-38 {
-  grid-template-columns: 24% 38% 38%; }
-
-.layout--uw-3-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-3-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-3-col .layout__region--third {
-  grid-column: 3 / 4; }
+  .layout--uw-3-col.even-split {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.even-split {
+        grid-template-columns: 33% 34% 33%; } }
+  .layout--uw-3-col.larger-left {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-left {
+        grid-template-columns: 50% 25% 25%; } }
+  .layout--uw-3-col.larger-middle {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-middle {
+        grid-template-columns: 25% 50% 25%; } }
+  .layout--uw-3-col.larger-right {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.larger-right {
+        grid-template-columns: 25% 25% 50%; } }
+  .layout--uw-3-col.legacy-38-38-24 {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.legacy-38-38-24 {
+        grid-template-columns: 38% 38% 24%; } }
+  .layout--uw-3-col.legacy-24-38-38 {
+    grid-template-columns: 100%; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col.legacy-24-38-38 {
+        grid-template-columns: 24% 38% 38%; } }
+  .layout--uw-3-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-3-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-3-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-3-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
 
 .layout--uw-4-col {
-  display: grid; }
-
-.layout--uw-4-col.even-split {
-  grid-template-columns: 25% 25% 25% 25%; }
-
-.layout--uw-4-col.larger-left {
-  grid-template-columns: 50% 16.67% 16.67% 16.66%; }
-
-.layout--uw-4-col.larger-second {
-  grid-template-columns: 16.67% 50% 16.67% 16.66%; }
-
-.layout--uw-4-col.larger-third {
-  grid-template-columns: 16.67% 16.67% 50% 16.66%; }
-
-.layout--uw-4-col.larger-right {
-  grid-template-columns: 16.67% 16.67% 16.66% 50%; }
-
-.layout--uw-4-col.legacy-23-27-27-23 {
-  grid-template-columns: 23% 27% 27% 23%; }
-
-.layout--uw-4-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-4-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-4-col .layout__region--third {
-  grid-column: 3 / 4; }
-
-.layout--uw-4-col .layout__region--fourth {
-  grid-column: 4 / 5; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.even-split {
+      grid-template-columns: 25% 25% 25% 25%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-left {
+      grid-template-columns: 50% 16.67% 16.67% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-second {
+      grid-template-columns: 16.67% 50% 16.67% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-third {
+      grid-template-columns: 16.67% 16.67% 50% 16.66%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.larger-right {
+      grid-template-columns: 16.67% 16.67% 16.66% 50%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-4-col.legacy-23-27-27-23 {
+      grid-template-columns: 23% 27% 27% 23%; } }
+  .layout--uw-4-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-4-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-4-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
+  .layout--uw-4-col .layout__region--fourth {
+    grid-column: 1 / 2;
+    grid-row: 4 / 5; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-4-col .layout__region--fourth {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2; } }
 
 .layout--uw-5-col {
-  display: grid; }
-
-.layout--uw-5-col.even-split {
-  grid-template-columns: 20% 20% 20% 20% 20%; }
-
-.layout--uw-5-col.larger-left {
-  grid-template-columns: 40% 15% 15% 15% 15%; }
-
-.layout--uw-5-col.larger-second {
-  grid-template-columns: 15% 40% 15% 15% 15%; }
-
-.layout--uw-5-col.larger-third {
-  grid-template-columns: 15% 15% 40% 15% 15%; }
-
-.layout--uw-5-col.larger-fourth {
-  grid-template-columns: 15% 15% 15% 40% 15%; }
-
-.layout--uw-5-col.larger-right {
-  grid-template-columns: 15% 15% 15% 15% 40%; }
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
-  grid-template-columns: 23% 19% 19% 19% 20%; }
-
-.layout--uw-5-col .layout__region--first {
-  grid-column: 1 / 2; }
-
-.layout--uw-5-col .layout__region--second {
-  grid-column: 2 / 3; }
-
-.layout--uw-5-col .layout__region--third {
-  grid-column: 3 / 4; }
-
-.layout--uw-5-col .layout__region--fourth {
-  grid-column: 4 / 5; }
-
-.layout--uw-5-col .layout__region--fifth {
-  grid-column: 5 / 6; }
+  display: grid;
+  grid-template-columns: 100%; }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.even-split {
+      grid-template-columns: 20% 20% 20% 20% 20%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-left {
+      grid-template-columns: 40% 15% 15% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-second {
+      grid-template-columns: 15% 40% 15% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-third {
+      grid-template-columns: 15% 15% 40% 15% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-fourth {
+      grid-template-columns: 15% 15% 15% 40% 15%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.larger-right {
+      grid-template-columns: 15% 15% 15% 15% 40%; } }
+  @media (min-width: 48.06rem) {
+    .layout--uw-5-col.legacy-23-19-19-19-20 {
+      grid-template-columns: 23% 19% 19% 19% 20%; } }
+  .layout--uw-5-col .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-5-col .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--second {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--third {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--third {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--fourth {
+    grid-column: 1 / 2;
+    grid-row: 4 / 5; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--fourth {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2; } }
+  .layout--uw-5-col .layout__region--fifth {
+    grid-column: 1 / 2;
+    grid-row: 5 / 6; }
+    @media (min-width: 48.06rem) {
+      .layout--uw-5-col .layout__region--fifth {
+        grid-column: 5 / 6;
+        grid-row: 1 / 2; } }
 
 .layout--uw-inverted-l-left {
-  display: grid; }
-
-.layout--uw-inverted-l-left.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-left.larger-left {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-inverted-l-left.larger-right {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-inverted-l-left .uw-inverted-l--left-side {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .uw-inverted-l--right-side {
   display: grid;
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-left .layout__region--second {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .layout__region--third {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-left .layout__region--fourth {
-  grid-column: 1 / 3;
-  grid-row: 2 / 3; }
+  grid-template-columns: 100%; }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.even-split {
+      grid-template-columns: 50% 50%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.larger-left {
+      grid-template-columns: 33% 67%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-left.larger-right {
+      grid-template-columns: 67% 33%; } }
+  .layout--uw-inverted-l-left .uw-inverted-l--left-side {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .uw-inverted-l--right-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-left .uw-inverted-l--right-side {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-inverted-l-left .layout__region--second {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .layout__region--third {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-left .layout__region--fourth {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
 
 .layout--uw-inverted-l-right {
-  display: grid; }
-
-.layout--uw-inverted-l-right.even-split {
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-right.larger-left {
-  grid-template-columns: 33% 67%; }
-
-.layout--uw-inverted-l-right.larger-right {
-  grid-template-columns: 67% 33%; }
-
-.layout--uw-inverted-l-right .uw-inverted-l--left-side {
   display: grid;
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-  grid-template-columns: 50% 50%; }
-
-.layout--uw-inverted-l-right .uw-inverted-l--right-side {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-right .layout__region--first {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-right .layout__region--second {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2; }
-
-.layout--uw-inverted-l-right .layout__region--third {
-  grid-column: 1 / 3;
-  grid-row: 2 / 3; }
-
-.layout__region {
+  grid-template-columns: 100%; }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.even-split {
+      grid-template-columns: 50% 50%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.larger-left {
+      grid-template-columns: 33% 67%; } }
+  @media (min-width: 63.1875rem) {
+    .layout--uw-inverted-l-right.larger-right {
+      grid-template-columns: 67% 33%; } }
+  .layout--uw-inverted-l-right .uw-inverted-l--left-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-right .uw-inverted-l--left-side {
+        grid-template-columns: 50% 50%; } }
+  .layout--uw-inverted-l-right .uw-inverted-l--right-side {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3; }
+    @media (min-width: 63.1875rem) {
+      .layout--uw-inverted-l-right .uw-inverted-l--right-side {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2; } }
+  .layout--uw-inverted-l-right .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-right .layout__region--second {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2; }
+  .layout--uw-inverted-l-right .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3; }
+
+.layout-builder .layout__region {
+  outline: 2px dashed #2f91da; }
+
+.pattern-lab-content .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;
   text-align: center; }
+  .pattern-lab-content .layout__region .pl-labels {
+    text-align: center; }
 
 .pl-layout-h2 {
-  padding: 1rem 0;
-  text-align: center; }
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 75rem;
+  padding: 0 16px; }
+  @media (min-width: 75rem) {
+    .pl-layout-h2 {
+      padding-left: 0;
+      padding-right: 0; } }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 71029af5af4435d151da5eb7ddc0404899db62bd..6ee94a30144da215a9420501aeb166cf593b30eb 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -1,3 +1,7 @@
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.expandcollapse = {
     attach: function (context, settings) {
@@ -64,6 +68,10 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.factfigure = {
     attach: function (context, settings) {
@@ -112,6 +120,10 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.imagegallery = {
     attach: function (context, settings) {
@@ -155,6 +167,10 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.multitypelist = {
     attach: function (context, settings) {
@@ -167,28 +183,29 @@
           return;
         }
 
-        // Add a click event handler to each tab
+        // Add a click event handler to each tab.
         tabs.forEach(tab => {
           tab.addEventListener("click", changeTabs);
         });
 
-        // Enable arrow navigation between tabs in the tab list
+        // Enable arrow navigation between tabs in the tab list.
         let tabFocus = 0;
 
         tabList.addEventListener("keydown", e => {
-          // Move right
+          // Move right.
           if (e.keyCode === 39 || e.keyCode === 37) {
             tabs[tabFocus].setAttribute("tabindex", -1);
             if (e.keyCode === 39) {
               tabFocus++;
-              // If we're at the end, go to the start
+              // If we're at the end, go to the start.
               if (tabFocus >= tabs.length) {
                 tabFocus = 0;
               }
-              // Move left
-            } else if (e.keyCode === 37) {
+              // Move left.
+            }
+else if (e.keyCode === 37) {
               tabFocus--;
-              // If we're at the start, move to the end
+              // If we're at the start, move to the end.
               if (tabFocus < 0) {
                 tabFocus = tabs.length - 1;
               }
@@ -205,20 +222,20 @@
         const parent = target.parentNode;
         const grandparent = parent.parentNode;
 
-        // Remove all current selected tabs
+        // Remove all current selected tabs.
         parent
             .querySelectorAll('[aria-selected="true"]')
             .forEach(t => t.setAttribute("aria-selected", false));
 
-        // Set this tab as selected
+        // Set this tab as selected.
         target.setAttribute("aria-selected", true);
 
-        // Hide all tab panels
+        // Hide all tab panels.
         grandparent
             .querySelectorAll('[role="tabpanel"]')
             .forEach(p => p.setAttribute("hidden", true));
 
-        // Show the selected panel
+        // Show the selected panel.
         grandparent.parentNode
             .querySelector(`#${target.getAttribute("aria-controls")}`)
             .removeAttribute("hidden");
@@ -228,6 +245,10 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($) {
   Drupal.behaviors.responsive_menu_combined = {
     attach: function (context, settings) {
@@ -248,7 +269,8 @@
           $list.hide();
           $('span:first-child',this).html('&#9656;');
           $(this).attr('aria-expanded', 'false');
-        } else {
+        }
+else {
           $list.show();
           $('span:first-child',this).html('&#9662;');
           $(this).attr('aria-expanded', 'true');
@@ -259,8 +281,10 @@
 })(jQuery);
 
 /**
- * Ckeditor Modal
+ * @file
+ * Ckeditor Modal.
  */
+
 (function ($, Drupal) {
   if ($.ui && $.ui.dialog) {
     orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
@@ -273,15 +297,19 @@
   }
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
     Drupal.behaviors.menuhorizontal = {
         attach: function (context, settings) {
-            // uw-horizontal-nav
+            // uw-horizontal-nav.
             $(document).ready(function () {
 
                 // Have to add the run this code only once, so that multiple
                 // loads of the menu are not shown when logged in.
-                $(document, context).once('menuhorizontal').each( function () {
+                $(document, context).once('menuhorizontal').each(function () {
 
                     const toggle = document.querySelector(".uw-navigation-button");
                     const navHeader = document.querySelector(".uw-header__navigation");
@@ -297,7 +325,8 @@
                             navHeader.classList.remove('open');
                             navHeader.classList.add('close');
                             $('html').removeClass('no-scroll');
-                        } else {
+                        }
+else {
                             this.classList.add('active');
                             this.setAttribute('aria-expanded', 'true');
                             navHeader.classList.remove('close');
@@ -324,31 +353,33 @@
 
                                     this.setAttribute('aria-expanded', 'false');
                                 }
-                                // If hamburger
+                                // If hamburger.
                                 if (screenWidth <= 767) {
-                                    // Look at parents and reset the menus
+                                    // Look at parents and reset the menus.
                                     if (parent.classList.contains('uw-horizontal-nav--secondary')) {
                                         $('.uw-horizontal-nav--main').css('display', 'block');
                                     }
                                 }
-                            } else if ($('.submenu-active')) {
+                            }
+else if ($('.submenu-active')) {
 
-                                // Get elements with .submnenu-active than close them,
+                                // Get elements with .submnenu-active than close them,.
                                 $('.submenu-active').removeClass('submenu-active').attr('aria-expanded', 'false');
 
-                                // and open this one.
+                                // And open this one.
                                 this.classList.add("submenu-active");
                                 this.setAttribute('aria-expanded', 'true');
 
-                                // If hamburger
+                                // If hamburger.
                                 if (screenWidth <= 767) {
-                                    // Look at parents and hide other menus if not secondary and open
+                                    // Look at parents and hide other menus if not secondary and open.
                                     if (parent.classList.contains('uw-horizontal-nav--secondary')) {
                                         $('.uw-horizontal-nav--main').css('display', 'none');
                                         $('.uw-horizontal-nav--secondary').css('display', 'block');
                                     }
                                 }
-                            } else {
+                            }
+else {
                                 this.classList.add('submenu-active');
                                 this.setAttribute('aria-expanded', 'true');
                             }
@@ -382,7 +413,7 @@
                             }
 
                             // Space bar keypress to open close menu
-                            // keyCode to be deprecated find way to use key
+                            // keyCode to be deprecated find way to use key.
                         });
                         item.addEventListener('keypress', function (e) {
                             if (e.keyCode == 32) {
@@ -395,11 +426,11 @@
                     document.addEventListener("click", closeSubmenu, false);
 
                     // If Toggle on page Add event listeners on the menu toggle button.
-                    if (toggle){
+                    if (toggle) {
                         toggle.addEventListener("click", toggleMenu, false);
                     }
 
-                    // apply timeout to the to event firing
+                    // Apply timeout to the to event firing
                     // so it fires at end of event.
                     function debouncer(func) {
                         var timeoutID,
@@ -417,17 +448,19 @@
                     // Check the width of the screen and
                     // force the button click if wider that 767px.
                     function menuCheckWidth() {
-                        // Set screenWidth var
+                        // Set screenWidth var.
                         var screenWidth = $(window).width();
                         navHeader.classList.add('close');
                         if (screenWidth > 767) {
                             if ($('html').hasClass('no-scroll')) {
                                 toggle.click();
                                 $('.uw-horizontal-nav').css('display', 'block');
-                            } else {
+                            }
+else {
                                 $('.uw-header__navigation').addClass('open');
                             }
-                        } else {
+                        }
+else {
                             if ($('.uw-header__navigation').hasClass('open')) {
                                 $('.uw-header__navigation').removeClass('open');
                                 $('.uw-header__navigation').addClass('close');
@@ -451,6 +484,10 @@
     };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, document, Drupal) {
     Drupal.behaviors.wcmsheadersearchbar = {
         attach: function (context, settings) {
@@ -459,6 +496,10 @@
     }
 })(jQuery, document, Drupal);
 
+/**
+ * @file
+ */
+
 (function ($, document, Drupal) {
     Drupal.behaviors.wcmsheadersearch = {
         attach: function (context, settings) {
@@ -480,9 +521,9 @@
                             }, timeout);
                     };
                 }
-                // Check the width of the screen and
+                // Check the width of the screen and.
                 function checkWidth() {
-                    // Set screenWidth var
+                    // Set screenWidth var.
                     var screenWidth = $(window).width();
 
                     if ($('.uw-header__masthead').hasClass('open')) {
diff --git a/source/_patterns/03-layouts/layout/_layout.scss b/source/_patterns/03-layouts/layout/_layout.scss
index 441905b1594187820a658eb2a72c4df5ffe0da5d..81867818c033350dadfa287771d27b1c4e260fd2 100644
--- a/source/_patterns/03-layouts/layout/_layout.scss
+++ b/source/_patterns/03-layouts/layout/_layout.scss
@@ -18,9 +18,7 @@
   }
 
   &.uw-full-width {
-
     @include uw-full-width;
-
   }
   // When wrapped with class to identify sidebar
   .uw-node__with-sidebar & {
diff --git a/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss b/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
index 417df87dd45a94111846c262e6e1e08e523eebc3..c87741a672839f7cc7981d0b6ff2f8ba915f4583 100644
--- a/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
@@ -1,27 +1,34 @@
 .layout--uw-2-col {
   display: grid;
-}
-
-.layout--uw-2-col.larger-left {
-  grid-template-columns: 67% 33%;
-}
-
-.layout--uw-2-col.larger-right {
-  grid-template-columns: 33% 67%;
-
-}
-
-.layout--uw-2-col.even-split {
-  grid-template-columns: 50% 50%;
-}
-
-
-.layout--uw-2-col {
-  .layout__region--first {
-    grid-column: 1 / 2;
+  grid-template-columns:100%;
+  &.larger-left {
+    @include medium{
+      grid-template-columns: 67% 33%;
+    }
+  }
+  &.larger-right {
+    @include medium{
+      grid-template-columns: 33% 67%;
+    }
+  }
+  &.even-split {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 50% 50%;
+    }
   }
-
-  .layout__region--second {
-    grid-column: 2 / 3;
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2/ 3;
+      @include medium{
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
   }
 }
diff --git a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
index 1f0eabf69d612420fa14901c56545763d8d295ae..e7833ebc39488404159455d5f2faa4228533828b 100644
--- a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -1,41 +1,62 @@
 .layout--uw-3-col {
   display: grid;
-}
-
-.layout--uw-3-col.even-split {
-  grid-template-columns: 33% 34% 33%;
-}
-
-.layout--uw-3-col.larger-left {
-  grid-template-columns: 50% 25% 25%;
-}
-
-.layout--uw-3-col.larger-middle {
-  grid-template-columns: 25% 50% 25%;
-}
-
-.layout--uw-3-col.larger-right {
-  grid-template-columns: 25% 25% 50%;
-}
-
-.layout--uw-3-col.legacy-38-38-24 {
-  grid-template-columns: 38% 38% 24%;
-}
-
-.layout--uw-3-col.legacy-24-38-38 {
-  grid-template-columns: 24% 38% 38%;
-}
-
-.layout--uw-3-col {
-  .layout__region--first {
-    grid-column: 1 / 2;
+  &.even-split {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 33% 34% 33%;
+    }
   }
-
-  .layout__region--second {
-    grid-column: 2 / 3;
+  &.larger-left {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 50% 25% 25%;
+    }
   }
-
-  .layout__region--third {
-    grid-column: 3 / 4;
+  &.larger-middle {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 25% 50% 25%;
+    }
+  }
+  &.larger-right {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 25% 25% 50%;
+    }
+  }
+  &.legacy-38-38-24 {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 38% 38% 24%;
+    }
+  }
+  &.legacy-24-38-38 {
+    grid-template-columns:100%;
+    @include medium{
+      grid-template-columns: 24% 38% 38%;
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row:1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row:2 / 3;
+      @include medium{
+        grid-column: 2 / 3;
+        grid-row:1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      grid-row:3 / 4;
+      @include medium{
+        grid-column: 3 / 4;
+        grid-row:1 / 2;
+      }
+    }
   }
 }
+
diff --git a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
index bb87ef18a2ac9e6050f499e4b22d1f0aa00aeccb..2cd42a8cf53fd993a7c0f79d1923952fac641ce9 100644
--- a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -1,43 +1,66 @@
 .layout--uw-4-col {
   display: grid;
+  grid-template-columns:100%;
+  &.even-split {
+    @include medium {
+      grid-template-columns: 25% 25% 25% 25%;
+    }
+  }
+  &.larger-left {
+    @include medium {
+      grid-template-columns: 50% 16.67% 16.67% 16.66%;
+    }
+  }
+  &.larger-second {
+    @include medium {
+      grid-template-columns: 16.67% 50% 16.67% 16.66%;
+    }
+  }
+  &.larger-third {
+    @include medium {
+      grid-template-columns: 16.67% 16.67% 50% 16.66%;
+    }
+  }
+  &.larger-right {
+    @include medium {
+      grid-template-columns: 16.67% 16.67% 16.66% 50%;
+    }
+  }
+  &.legacy-23-27-27-23 {
+    @include medium {
+      grid-template-columns: 23% 27% 27% 23%;
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+      @include medium{
+        grid-column: 2 / 3;
+        grid-row:1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      grid-row: 3 / 4;
+      @include medium{
+        grid-column: 3 / 4;
+        grid-row:1 / 2;
+      }
+    }
+    &--fourth {
+      grid-column: 1 / 2;
+      grid-row: 4 / 5;
+      @include medium{
+        grid-column: 4 / 5;
+        grid-row: 1 / 2;
+      }
+    }
+  }
 }
 
-.layout--uw-4-col.even-split {
-  grid-template-columns: 25% 25% 25% 25%;
-}
-
-.layout--uw-4-col.larger-left {
-  grid-template-columns: 50% 16.67% 16.67% 16.66%;
-}
-
-.layout--uw-4-col.larger-second {
-  grid-template-columns: 16.67% 50% 16.67% 16.66%;
-}
-
-.layout--uw-4-col.larger-third {
-  grid-template-columns: 16.67% 16.67% 50% 16.66%;
-}
-
-.layout--uw-4-col.larger-right {
-  grid-template-columns: 16.67% 16.67% 16.66% 50%;
-}
 
-.layout--uw-4-col.legacy-23-27-27-23 {
-  grid-template-columns: 23% 27% 27% 23%;
-}
-
-.layout--uw-4-col .layout__region--first {
-  grid-column: 1 / 2;
-}
-
-.layout--uw-4-col .layout__region--second {
-  grid-column: 2 / 3;
-}
-
-.layout--uw-4-col .layout__region--third {
-  grid-column: 3 / 4;
-}
-
-.layout--uw-4-col .layout__region--fourth {
-  grid-column: 4 / 5;
-}
diff --git a/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
index a081f7faef26281739fca7919503a18130a893d1..d0e9b5cc94efc7f87a548ad386670db158d9c26a 100644
--- a/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -1,53 +1,77 @@
 .layout--uw-5-col {
   display: grid;
-}
-
-.layout--uw-5-col.even-split {
-  grid-template-columns: 20% 20% 20% 20% 20%;
-}
-
-.layout--uw-5-col.larger-left {
-  grid-template-columns: 40% 15% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-second {
-  grid-template-columns: 15% 40% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-third {
-  grid-template-columns: 15% 15% 40% 15% 15%;
-}
-
-.layout--uw-5-col.larger-fourth {
-  grid-template-columns: 15% 15% 15% 40% 15%;
-}
-
-.layout--uw-5-col.larger-right {
-  grid-template-columns: 15% 15% 15% 15% 40%;
-}
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
-  grid-template-columns: 23% 19% 19% 19% 20%;
-}
-
-.layout--uw-5-col {
-  .layout__region--first {
-    grid-column: 1 / 2;
+  grid-template-columns:100%;
+  &.even-split {
+    @include medium{
+      grid-template-columns: 20% 20% 20% 20% 20%;
+    }
+  }
+  &.larger-left {
+    @include medium{
+      grid-template-columns: 40% 15% 15% 15% 15%;
+    }
+  }
+  &.larger-second {
+    @include medium{
+      grid-template-columns: 15% 40% 15% 15% 15%;
+    }
+  }
+  &.larger-third {
+    @include medium{
+      grid-template-columns: 15% 15% 40% 15% 15%;
+    }
   }
-
-  .layout__region--second {
-    grid-column: 2 / 3;
+  &.larger-fourth {
+    @include medium{
+      grid-template-columns: 15% 15% 15% 40% 15%;
+    }
   }
-
-  .layout__region--third {
-    grid-column: 3 / 4;
+  &.larger-right {
+    @include medium{
+      grid-template-columns: 15% 15% 15% 15% 40%;
+    }
   }
-
-  .layout__region--fourth {
-    grid-column: 4 / 5;
+  &.legacy-23-19-19-19-20 {
+    @include medium{
+      grid-template-columns: 23% 19% 19% 19% 20%;
+    }
   }
-
-  .layout__region--fifth {
-    grid-column: 5 / 6;
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row:1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+      @include medium{
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      grid-row: 3 / 4;
+      @include medium{
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+      }
+    }
+    &--fourth {
+      grid-column: 1 / 2;
+      grid-row: 4 / 5;
+      @include medium{
+        grid-column: 4 / 5;
+        grid-row: 1 / 2;
+      }
+    }
+    &--fifth {
+      grid-column: 1 / 2;
+      grid-row: 5 / 6;
+      @include medium{
+        grid-column: 5 / 6;
+        grid-row: 1 / 2;
+      }
+    }
   }
 }
diff --git a/source/_patterns/03-layouts/layout/layout--5-col/layout--5-col.yml b/source/_patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
index 711bf7fbfb9aac798d97d8d6820dc142ba25b5a7..4cb43cae3cb0a06ed6b2392d4af0204b8a538330 100644
--- a/source/_patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
+++ b/source/_patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
@@ -19,4 +19,4 @@ column_classes:
     classes: 'layout layout--uw-5-col larger-right'
   -
     name: 'Legacy (23%, 19%, 19%, 19%, 20%)'
-    classes: 'layout layout--uw-5-col legacy-23-19-19-19-203'
+    classes: 'layout layout--uw-5-col legacy-23-19-19-19-20'
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss b/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
index e64de5da9e0274897786b5bb385b993f62838e29..9c503c6df4d5d8e30464ae8ae8e9f50f42c7157c 100644
--- a/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
@@ -1,44 +1,47 @@
 .layout--uw-inverted-l-left {
   display: grid;
-}
-
-.layout--uw-inverted-l-left.even-split {
-  grid-template-columns: 50% 50%;
-}
-
-.layout--uw-inverted-l-left.larger-left {
-  grid-template-columns: 33% 67%;
-}
-
-.layout--uw-inverted-l-left.larger-right {
-  grid-template-columns: 67% 33%;
-}
-
-.layout--uw-inverted-l-left  {
+  grid-template-columns:100%;
+  &.even-split {
+    @include large{
+      grid-template-columns: 50% 50%;
+    }
+  }
+  &.larger-left {
+    @include large{
+      grid-template-columns: 33% 67%;
+    }
+  }
+  &.larger-right {
+    @include large{
+      grid-template-columns: 67% 33%;
+    }
+  }
   .uw-inverted-l--left-side {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
   }
-
   .uw-inverted-l--right-side {
     display: grid;
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-    grid-template-columns: 50% 50%;
-  }
-
-  .layout__region--second {
     grid-column: 1 / 2;
-    grid-row: 1 / 2;
-  }
-
-  .layout__region--third {
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .layout__region--fourth {
-    grid-column: 1 / 3;
     grid-row: 2 / 3;
+    @include large{
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+      grid-template-columns: 50% 50%;
+    }
+  }
+  .layout__region{
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--third {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+    &--fourth {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
+    }
   }
 }
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
index 45998124f8fb7d2b1c346847bb1ead5f12d3a380..0af09d639a2ea4589cffe6de8e780dfcb9684c77 100644
--- a/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -1,45 +1,50 @@
 .layout--uw-inverted-l-right {
   display: grid;
-}
-
-.layout--uw-inverted-l-right.even-split {
-  grid-template-columns: 50% 50%;
-}
-
-.layout--uw-inverted-l-right.larger-left {
-  grid-template-columns: 33% 67%;
-}
-
-.layout--uw-inverted-l-right.larger-right {
-  grid-template-columns: 67% 33%;
-}
-
-.layout--uw-inverted-l-right {
+  grid-template-columns:100%;
+  &.even-split {
+    @include large{
+      grid-template-columns: 50% 50%;
+    }
+  }
+  &.larger-left {
+    @include large{
+      grid-template-columns: 33% 67%;
+    }
+  }
+  &.larger-right {
+    @include large{
+      grid-template-columns: 67% 33%;
+    }
+  }
   .uw-inverted-l--left-side {
     display: grid;
     grid-column: 1 / 2;
     grid-row: 1 / 2;
-    grid-template-columns: 50% 50%;
+    @include large{
+      grid-template-columns: 50% 50%;
+    }
   }
-
   .uw-inverted-l--right-side {
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .layout__region--first {
     grid-column: 1 / 2;
-    grid-row: 1 / 2;
-  }
-
-  .layout__region--second {
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-  }
-
-  .layout__region--third {
-    grid-column: 1 / 3;
     grid-row: 2 / 3;
+    @include large{
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+    &--third {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
+
+    }
   }
-
 }
diff --git a/source/_patterns/03-layouts/layout/layout-base.scss b/source/_patterns/03-layouts/layout/layout-base.scss
index 75bb8129caa421cecbe52eb2eb4437cfbb531770..77ac528fde24981157caa3afb6f16439338ad614 100644
--- a/source/_patterns/03-layouts/layout/layout-base.scss
+++ b/source/_patterns/03-layouts/layout/layout-base.scss
@@ -1,10 +1,17 @@
 .layout__region {
-  outline: 2px dashed #2f91da;
-  padding: 1.5rem;
-  text-align: center;
+  .layout-builder &{
+    outline: 2px dashed #2f91da;
+  }
+  .pattern-lab-content & {
+    outline: 2px dashed #2f91da;
+    padding: 1.5rem;
+    text-align: center;
+    .pl-labels{
+      text-align:center;
+    }
+  }
 }
 
 .pl-layout-h2 {
-  padding: 1rem 0;
-  text-align: center;
-}
\ No newline at end of file
+  @include uw-contained-width;
+}