diff --git a/css/styles.css b/css/styles.css
index 4eea2efdf50f3533ad23ce99283f6b2040b5f445..2d69849a0abf799350a64132ee481b98e79fe8fe 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2142,10 +2142,10 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) 1fr; } }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: 1fr minmax(0, 2fr); } }
.layout--uw-2-col.even-split {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
@@ -2169,32 +2169,32 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.even-split {
- grid-template-columns: repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-left {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-left {
- grid-template-columns: 2fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-middle {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-middle {
- grid-template-columns: 1fr 2fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-right {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-right {
- grid-template-columns: 1fr 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } }
.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: repeat(2, 1fr) 24%; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 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% repeat(2, 1fr); } }
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2219,40 +2219,40 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 40.06rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(4, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: 3fr repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: 1fr 3fr repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(3, 1fr) 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr; } }
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); } }
.layout--uw-4-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2286,25 +2286,25 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-5-col.even-split {
- grid-template-columns: repeat(5, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-left {
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-second {
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-third {
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-fourth {
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-right {
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 1fr 1fr 1fr 20%; } }
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%; } }
.layout--uw-5-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2343,13 +2343,13 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-left .uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -2360,7 +2360,7 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
grid-column: 2 / 3; } }
@@ -2384,13 +2384,13 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.even-split {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
display: grid;
gap: 2rem;
@@ -2399,7 +2399,7 @@ svg:not(:root) {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3; }
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index 21e44825993cc8423e053d8ad5c2d719b6b853a0..0e20cfbdcd498468568cc56ce3a135947b379264 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -531,10 +531,10 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) 1fr; } }
@media (min-width: 48.06rem) {
.layout--uw-2-col.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: 1fr minmax(0, 2fr); } }
.layout--uw-2-col.even-split {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
@@ -558,32 +558,32 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.even-split {
- grid-template-columns: repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-left {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-left {
- grid-template-columns: 2fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-middle {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-middle {
- grid-template-columns: 1fr 2fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); } }
.layout--uw-3-col.larger-right {
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-3-col.larger-right {
- grid-template-columns: 1fr 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } }
.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: repeat(2, 1fr) 24%; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 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% repeat(2, 1fr); } }
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-3-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -608,40 +608,40 @@
grid-template-columns: 100%; }
@media (min-width: 40.06rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.even-split {
- grid-template-columns: repeat(4, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-left {
- grid-template-columns: 3fr repeat(3, 1fr); } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-second {
- grid-template-columns: 1fr 3fr repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-third {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.larger-right {
- grid-template-columns: repeat(3, 1fr) 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 40.06rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-4-col.legacy-23-27-27-23 {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr; } }
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); } }
.layout--uw-4-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -675,25 +675,25 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-5-col.even-split {
- grid-template-columns: repeat(5, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-left {
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-second {
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-third {
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-fourth {
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.larger-right {
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); } }
@media (min-width: 48.06rem) {
.layout--uw-5-col.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 1fr 1fr 1fr 20%; } }
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%; } }
.layout--uw-5-col .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -732,13 +732,13 @@
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.even-split {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-left .uw-inverted-l--left-side {
grid-column: 1 / 2;
grid-row: 1 / 2; }
@@ -749,7 +749,7 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-left .uw-inverted-l--right-side {
grid-column: 2 / 3; } }
@@ -773,13 +773,13 @@
grid-template-columns: 100%; }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.even-split {
- grid-template-columns: 1fr 1fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-left {
- grid-template-columns: 2fr 1fr; } }
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 63.1875rem) {
.layout--uw-inverted-l-right.larger-right {
- grid-template-columns: 1fr 2fr; } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
display: grid;
gap: 2rem;
@@ -788,7 +788,7 @@
grid-template-columns: 100%; }
@media (min-width: 48.06rem) {
.layout--uw-inverted-l-right .uw-inverted-l--left-side {
- grid-template-columns: repeat(2, 1fr); } }
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.layout--uw-inverted-l-right .uw-inverted-l--right-side {
grid-column: 1 / 2;
grid-row: 2 / 3; }
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 f9c126516e83e1990c250b8b4945959ddab35b4b..275c26e3c17858f75c7f0581af5475ac63820a1a 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
@@ -4,12 +4,12 @@
grid-template-columns:100%;
&.larger-left {
@include medium{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) 1fr;
}
}
&.larger-right {
@include medium{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: 1fr minmax(0, 2fr);
}
}
&.even-split {
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 355dc7555aea37f0dd2fad5a96d4f39a7960045b..6a670eac30c140bdb1243fdf22530bb839b1cfd4 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
@@ -4,37 +4,37 @@
&.even-split {
grid-template-columns:100%;
@include medium{
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 2fr 1fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-middle {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 1fr 2fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 1fr 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
}
&.legacy-38-38-24 {
grid-template-columns:100%;
@include medium{
- grid-template-columns: repeat(2, 1fr) 24%;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
}
}
&.legacy-24-38-38 {
grid-template-columns:100%;
@include medium{
- grid-template-columns: 24% repeat(2, 1fr);
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
}
}
.layout__region{
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 b628cb0a19562111d85f816ef5100bef15a2b3ec..d23d8dd1ff2584fb659614afd303e52702646c73 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
@@ -4,54 +4,54 @@
grid-template-columns:100%;
&.even-split {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 3fr repeat(3, 1fr);
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 1fr 3fr repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(2, 1fr) 3fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: repeat(3, 1fr) 3fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-27-27-23 {
@include small{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}
@include large {
- grid-template-columns: 0.8fr repeat(2, 1.1fr) 0.8fr;
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}
}
.layout__region{
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 72bffce64109ed666a917c58f8139928102d0cab..160cb0389b897e96b45c3a6889ba281618cacc8b 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
@@ -4,37 +4,37 @@
grid-template-columns:100%;
&.even-split {
@include medium{
- grid-template-columns: repeat(5, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include medium{
- grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-second {
@include medium{
- grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-third {
@include medium{
- grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-fourth {
@include medium{
- grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
}
}
&.larger-right {
@include medium{
- grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
}
}
&.legacy-23-19-19-19-20 {
@include medium{
- grid-template-columns: 23% 1fr 1fr 1fr 20%;
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%;
}
}
.layout__region{
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 563d445a234799d34351c6339c8195723b4527c7..d44db24f8006abdfd910e48b2ce8dab61f3cd211 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
@@ -4,17 +4,17 @@
grid-template-columns:100%;
&.even-split {
@include large{
- grid-template-columns: repeat(2 , 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
&.larger-left {
@include large{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@include large{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
@@ -27,7 +27,7 @@
grid-column: 1 / 2;
grid-template-columns: 100%;
@include medium {
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@include large{
grid-column: 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 9caee288097b32a1efaf5bd05d45a814194cc7ca..f977a286ca5aecf3c48c0ac2557904d44e7d43ea 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
@@ -4,17 +4,17 @@
grid-template-columns:100%;
&.even-split {
@include large{
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
&.larger-left {
@include large{
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&.larger-right {
@include large{
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
.uw-inverted-l--left-side {
@@ -24,7 +24,7 @@
grid-row: 1 / 2;
grid-template-columns: 100%;
@include medium{
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.uw-inverted-l--right-side {