diff --git a/.gitignore b/.gitignore index 61dc253..2b2a1e2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ bin etc node_modules output -*.log \ No newline at end of file +*.log +.idea/ \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/bootstrap-grid.sketch b/examples/bootstrap/css-gridish/bootstrap-grid.sketch index 8a34ffc..5e43bd5 100644 Binary files a/examples/bootstrap/css-gridish/bootstrap-grid.sketch and b/examples/bootstrap/css-gridish/bootstrap-grid.sketch differ diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css index 8e72b63..beefb3a 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css @@ -283,6 +283,34 @@ body { .bootstrap-grid__col--sm--1.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 1; } +.bootstrap-grid__offset--sm--1 { + margin-left: 8.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.0833); } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--1 { + grid-column: 2 / span 1; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--2 { + grid-column: 2 / span 2; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--3 { + grid-column: 2 / span 3; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--4 { + grid-column: 2 / span 4; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--5 { + grid-column: 2 / span 5; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--6 { + grid-column: 2 / span 6; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--7 { + grid-column: 2 / span 7; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--8 { + grid-column: 2 / span 8; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--9 { + grid-column: 2 / span 9; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--10 { + grid-column: 2 / span 10; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--11 { + grid-column: 2 / span 11; } + .bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--12 { + grid-column: 2 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--1 { grid-row: span 1; @@ -302,6 +330,34 @@ body { .bootstrap-grid__col--sm--2.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 2; } +.bootstrap-grid__offset--sm--2 { + margin-left: 16.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.1666); } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--1 { + grid-column: 3 / span 1; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--2 { + grid-column: 3 / span 2; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--3 { + grid-column: 3 / span 3; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--4 { + grid-column: 3 / span 4; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--5 { + grid-column: 3 / span 5; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--6 { + grid-column: 3 / span 6; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--7 { + grid-column: 3 / span 7; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--8 { + grid-column: 3 / span 8; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--9 { + grid-column: 3 / span 9; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--10 { + grid-column: 3 / span 10; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--11 { + grid-column: 3 / span 11; } + .bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--12 { + grid-column: 3 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--2 { grid-row: span 2; @@ -321,6 +377,34 @@ body { .bootstrap-grid__col--sm--3.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 3; } +.bootstrap-grid__offset--sm--3 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--1 { + grid-column: 4 / span 1; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--2 { + grid-column: 4 / span 2; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--3 { + grid-column: 4 / span 3; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--4 { + grid-column: 4 / span 4; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--5 { + grid-column: 4 / span 5; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--6 { + grid-column: 4 / span 6; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--7 { + grid-column: 4 / span 7; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--8 { + grid-column: 4 / span 8; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--9 { + grid-column: 4 / span 9; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--10 { + grid-column: 4 / span 10; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--11 { + grid-column: 4 / span 11; } + .bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--12 { + grid-column: 4 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--3 { grid-row: span 3; @@ -340,6 +424,34 @@ body { .bootstrap-grid__col--sm--4.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 4; } +.bootstrap-grid__offset--sm--4 { + margin-left: 33.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.3333); } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--1 { + grid-column: 5 / span 1; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--2 { + grid-column: 5 / span 2; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--3 { + grid-column: 5 / span 3; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--4 { + grid-column: 5 / span 4; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--5 { + grid-column: 5 / span 5; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--6 { + grid-column: 5 / span 6; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--7 { + grid-column: 5 / span 7; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--8 { + grid-column: 5 / span 8; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--9 { + grid-column: 5 / span 9; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--10 { + grid-column: 5 / span 10; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--11 { + grid-column: 5 / span 11; } + .bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--12 { + grid-column: 5 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--4 { grid-row: span 4; @@ -359,6 +471,34 @@ body { .bootstrap-grid__col--sm--5.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 5; } +.bootstrap-grid__offset--sm--5 { + margin-left: 41.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.4166); } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--1 { + grid-column: 6 / span 1; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--2 { + grid-column: 6 / span 2; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--3 { + grid-column: 6 / span 3; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--4 { + grid-column: 6 / span 4; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--5 { + grid-column: 6 / span 5; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--6 { + grid-column: 6 / span 6; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--7 { + grid-column: 6 / span 7; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--8 { + grid-column: 6 / span 8; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--9 { + grid-column: 6 / span 9; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--10 { + grid-column: 6 / span 10; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--11 { + grid-column: 6 / span 11; } + .bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--12 { + grid-column: 6 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--5 { grid-row: span 5; @@ -378,6 +518,34 @@ body { .bootstrap-grid__col--sm--6.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 6; } +.bootstrap-grid__offset--sm--6 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--1 { + grid-column: 7 / span 1; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--2 { + grid-column: 7 / span 2; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--3 { + grid-column: 7 / span 3; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--4 { + grid-column: 7 / span 4; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--5 { + grid-column: 7 / span 5; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--6 { + grid-column: 7 / span 6; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--7 { + grid-column: 7 / span 7; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--8 { + grid-column: 7 / span 8; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--9 { + grid-column: 7 / span 9; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--10 { + grid-column: 7 / span 10; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--11 { + grid-column: 7 / span 11; } + .bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--12 { + grid-column: 7 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--6 { grid-row: span 6; @@ -397,6 +565,34 @@ body { .bootstrap-grid__col--sm--7.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 7; } +.bootstrap-grid__offset--sm--7 { + margin-left: 58.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5833); } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--1 { + grid-column: 8 / span 1; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--2 { + grid-column: 8 / span 2; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--3 { + grid-column: 8 / span 3; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--4 { + grid-column: 8 / span 4; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--5 { + grid-column: 8 / span 5; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--6 { + grid-column: 8 / span 6; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--7 { + grid-column: 8 / span 7; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--8 { + grid-column: 8 / span 8; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--9 { + grid-column: 8 / span 9; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--10 { + grid-column: 8 / span 10; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--11 { + grid-column: 8 / span 11; } + .bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--12 { + grid-column: 8 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--7 { grid-row: span 7; @@ -416,6 +612,34 @@ body { .bootstrap-grid__col--sm--8.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 8; } +.bootstrap-grid__offset--sm--8 { + margin-left: 66.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.6666); } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--1 { + grid-column: 9 / span 1; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--2 { + grid-column: 9 / span 2; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--3 { + grid-column: 9 / span 3; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--4 { + grid-column: 9 / span 4; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--5 { + grid-column: 9 / span 5; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--6 { + grid-column: 9 / span 6; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--7 { + grid-column: 9 / span 7; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--8 { + grid-column: 9 / span 8; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--9 { + grid-column: 9 / span 9; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--10 { + grid-column: 9 / span 10; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--11 { + grid-column: 9 / span 11; } + .bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--12 { + grid-column: 9 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--8 { grid-row: span 8; @@ -435,6 +659,34 @@ body { .bootstrap-grid__col--sm--9.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 9; } +.bootstrap-grid__offset--sm--9 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--1 { + grid-column: 10 / span 1; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--2 { + grid-column: 10 / span 2; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--3 { + grid-column: 10 / span 3; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--4 { + grid-column: 10 / span 4; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--5 { + grid-column: 10 / span 5; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--6 { + grid-column: 10 / span 6; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--7 { + grid-column: 10 / span 7; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--8 { + grid-column: 10 / span 8; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--9 { + grid-column: 10 / span 9; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--10 { + grid-column: 10 / span 10; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--11 { + grid-column: 10 / span 11; } + .bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--12 { + grid-column: 10 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--9 { grid-row: span 9; @@ -454,6 +706,34 @@ body { .bootstrap-grid__col--sm--10.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 10; } +.bootstrap-grid__offset--sm--10 { + margin-left: 83.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.8333); } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--1 { + grid-column: 11 / span 1; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--2 { + grid-column: 11 / span 2; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--3 { + grid-column: 11 / span 3; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--4 { + grid-column: 11 / span 4; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--5 { + grid-column: 11 / span 5; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--6 { + grid-column: 11 / span 6; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--7 { + grid-column: 11 / span 7; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--8 { + grid-column: 11 / span 8; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--9 { + grid-column: 11 / span 9; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--10 { + grid-column: 11 / span 10; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--11 { + grid-column: 11 / span 11; } + .bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--12 { + grid-column: 11 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--10 { grid-row: span 10; @@ -473,6 +753,34 @@ body { .bootstrap-grid__col--sm--11.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 11; } +.bootstrap-grid__offset--sm--11 { + margin-left: 91.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.9166); } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--1 { + grid-column: 12 / span 1; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--2 { + grid-column: 12 / span 2; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--3 { + grid-column: 12 / span 3; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--4 { + grid-column: 12 / span 4; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--5 { + grid-column: 12 / span 5; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--6 { + grid-column: 12 / span 6; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--7 { + grid-column: 12 / span 7; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--8 { + grid-column: 12 / span 8; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--9 { + grid-column: 12 / span 9; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--10 { + grid-column: 12 / span 10; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--11 { + grid-column: 12 / span 11; } + .bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--12 { + grid-column: 12 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--11 { grid-row: span 11; @@ -492,6 +800,34 @@ body { .bootstrap-grid__col--sm--12.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 12; } +.bootstrap-grid__offset--sm--12 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--1 { + grid-column: 13 / span 1; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--2 { + grid-column: 13 / span 2; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--3 { + grid-column: 13 / span 3; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--4 { + grid-column: 13 / span 4; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--5 { + grid-column: 13 / span 5; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--6 { + grid-column: 13 / span 6; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--7 { + grid-column: 13 / span 7; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--8 { + grid-column: 13 / span 8; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--9 { + grid-column: 13 / span 9; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--10 { + grid-column: 13 / span 10; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--11 { + grid-column: 13 / span 11; } + .bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--12 { + grid-column: 13 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--12 { grid-row: span 12; @@ -542,7 +878,8 @@ body { .bootstrap-grid > [class*="bootstrap-grid__col--"] { min-width: initial; max-width: initial; - width: initial; } + width: initial; + margin-left: initial; } .bootstrap-grid > *.bootstrap-grid, .bootstrap-grid > [class*="bootstrap-grid__col--"].bootstrap-grid { display: grid; } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css index 687124f..43d9e08 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css @@ -1 +1 @@ -html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1{max-width:8.33rem;max-width:calc((100rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:8.33rem;max-height:calc((100rem - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--2{max-width:16.66rem;max-width:calc((100rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:16.66rem;max-height:calc((100rem - var(--scrollbar-width))* .1666)}.bootstrap-grid__col--sm--3{max-width:25rem;max-width:calc((100rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:25rem;max-height:calc((100rem - var(--scrollbar-width))* .25)}.bootstrap-grid__col--sm--4{max-width:33.33rem;max-width:calc((100rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:33.33rem;max-height:calc((100rem - var(--scrollbar-width))* .3333)}.bootstrap-grid__col--sm--5{max-width:41.66rem;max-width:calc((100rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:41.66rem;max-height:calc((100rem - var(--scrollbar-width))* .4166)}.bootstrap-grid__col--sm--6{max-width:50rem;max-width:calc((100rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:50rem;max-height:calc((100rem - var(--scrollbar-width))* .5)}.bootstrap-grid__col--sm--7{max-width:58.33rem;max-width:calc((100rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:58.33rem;max-height:calc((100rem - var(--scrollbar-width))* .5833)}.bootstrap-grid__col--sm--8{max-width:66.66rem;max-width:calc((100rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:66.66rem;max-height:calc((100rem - var(--scrollbar-width))* .6666)}.bootstrap-grid__col--sm--9{max-width:75rem;max-width:calc((100rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:75rem;max-height:calc((100rem - var(--scrollbar-width))* .75)}.bootstrap-grid__col--sm--10{max-width:83.33rem;max-width:calc((100rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:83.33rem;max-height:calc((100rem - var(--scrollbar-width))* .8333)}.bootstrap-grid__col--sm--11{max-width:91.66rem;max-width:calc((100rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:91.66rem;max-height:calc((100rem - var(--scrollbar-width))* .9166)}.bootstrap-grid__col--sm--12{max-width:100rem;max-width:calc((100rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:100rem;max-height:calc((100rem - var(--scrollbar-width))* 1)}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none} \ No newline at end of file +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1{max-width:8.33rem;max-width:calc((100rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid__offset--sm--1{margin-left:8.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--1{grid-column:2/span 1}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--2{grid-column:2/span 2}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--3{grid-column:2/span 3}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--4{grid-column:2/span 4}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--5{grid-column:2/span 5}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--6{grid-column:2/span 6}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--7{grid-column:2/span 7}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--8{grid-column:2/span 8}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--9{grid-column:2/span 9}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--10{grid-column:2/span 10}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--11{grid-column:2/span 11}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--12{grid-column:2/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:8.33rem;max-height:calc((100rem - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--2{max-width:16.66rem;max-width:calc((100rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid__offset--sm--2{margin-left:16.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .1666)}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--1{grid-column:3/span 1}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--2{grid-column:3/span 2}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--3{grid-column:3/span 3}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--4{grid-column:3/span 4}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--5{grid-column:3/span 5}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--6{grid-column:3/span 6}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--7{grid-column:3/span 7}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--8{grid-column:3/span 8}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--9{grid-column:3/span 9}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--10{grid-column:3/span 10}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--11{grid-column:3/span 11}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--12{grid-column:3/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:16.66rem;max-height:calc((100rem - var(--scrollbar-width))* .1666)}.bootstrap-grid__col--sm--3{max-width:25rem;max-width:calc((100rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid__offset--sm--3{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--1{grid-column:4/span 1}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--2{grid-column:4/span 2}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--3{grid-column:4/span 3}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--4{grid-column:4/span 4}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--5{grid-column:4/span 5}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--6{grid-column:4/span 6}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--7{grid-column:4/span 7}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--8{grid-column:4/span 8}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--9{grid-column:4/span 9}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--10{grid-column:4/span 10}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--11{grid-column:4/span 11}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--12{grid-column:4/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:25rem;max-height:calc((100rem - var(--scrollbar-width))* .25)}.bootstrap-grid__col--sm--4{max-width:33.33rem;max-width:calc((100rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid__offset--sm--4{margin-left:33.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .3333)}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--1{grid-column:5/span 1}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--2{grid-column:5/span 2}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--3{grid-column:5/span 3}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--4{grid-column:5/span 4}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--5{grid-column:5/span 5}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--6{grid-column:5/span 6}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--7{grid-column:5/span 7}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--8{grid-column:5/span 8}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--9{grid-column:5/span 9}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--10{grid-column:5/span 10}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--11{grid-column:5/span 11}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--12{grid-column:5/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:33.33rem;max-height:calc((100rem - var(--scrollbar-width))* .3333)}.bootstrap-grid__col--sm--5{max-width:41.66rem;max-width:calc((100rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid__offset--sm--5{margin-left:41.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .4166)}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--1{grid-column:6/span 1}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--2{grid-column:6/span 2}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--3{grid-column:6/span 3}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--4{grid-column:6/span 4}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--5{grid-column:6/span 5}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--6{grid-column:6/span 6}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--7{grid-column:6/span 7}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--8{grid-column:6/span 8}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--9{grid-column:6/span 9}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--10{grid-column:6/span 10}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--11{grid-column:6/span 11}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--12{grid-column:6/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:41.66rem;max-height:calc((100rem - var(--scrollbar-width))* .4166)}.bootstrap-grid__col--sm--6{max-width:50rem;max-width:calc((100rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid__offset--sm--6{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--1{grid-column:7/span 1}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--2{grid-column:7/span 2}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--3{grid-column:7/span 3}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--4{grid-column:7/span 4}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--5{grid-column:7/span 5}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--6{grid-column:7/span 6}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--7{grid-column:7/span 7}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--8{grid-column:7/span 8}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--9{grid-column:7/span 9}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--10{grid-column:7/span 10}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--11{grid-column:7/span 11}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--12{grid-column:7/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:50rem;max-height:calc((100rem - var(--scrollbar-width))* .5)}.bootstrap-grid__col--sm--7{max-width:58.33rem;max-width:calc((100rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid__offset--sm--7{margin-left:58.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .5833)}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--1{grid-column:8/span 1}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--2{grid-column:8/span 2}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--3{grid-column:8/span 3}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--4{grid-column:8/span 4}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--5{grid-column:8/span 5}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--6{grid-column:8/span 6}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--7{grid-column:8/span 7}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--8{grid-column:8/span 8}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--9{grid-column:8/span 9}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--10{grid-column:8/span 10}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--11{grid-column:8/span 11}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--12{grid-column:8/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:58.33rem;max-height:calc((100rem - var(--scrollbar-width))* .5833)}.bootstrap-grid__col--sm--8{max-width:66.66rem;max-width:calc((100rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid__offset--sm--8{margin-left:66.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .6666)}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--1{grid-column:9/span 1}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--2{grid-column:9/span 2}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--3{grid-column:9/span 3}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--4{grid-column:9/span 4}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--5{grid-column:9/span 5}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--6{grid-column:9/span 6}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--7{grid-column:9/span 7}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--8{grid-column:9/span 8}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--9{grid-column:9/span 9}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--10{grid-column:9/span 10}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--11{grid-column:9/span 11}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--12{grid-column:9/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:66.66rem;max-height:calc((100rem - var(--scrollbar-width))* .6666)}.bootstrap-grid__col--sm--9{max-width:75rem;max-width:calc((100rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid__offset--sm--9{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--1{grid-column:10/span 1}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--2{grid-column:10/span 2}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--3{grid-column:10/span 3}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--4{grid-column:10/span 4}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--5{grid-column:10/span 5}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--6{grid-column:10/span 6}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--7{grid-column:10/span 7}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--8{grid-column:10/span 8}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--9{grid-column:10/span 9}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--10{grid-column:10/span 10}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--11{grid-column:10/span 11}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--12{grid-column:10/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:75rem;max-height:calc((100rem - var(--scrollbar-width))* .75)}.bootstrap-grid__col--sm--10{max-width:83.33rem;max-width:calc((100rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid__offset--sm--10{margin-left:83.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .8333)}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--1{grid-column:11/span 1}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--2{grid-column:11/span 2}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--3{grid-column:11/span 3}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--4{grid-column:11/span 4}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--5{grid-column:11/span 5}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--6{grid-column:11/span 6}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--7{grid-column:11/span 7}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--8{grid-column:11/span 8}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--9{grid-column:11/span 9}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--10{grid-column:11/span 10}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--11{grid-column:11/span 11}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--12{grid-column:11/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:83.33rem;max-height:calc((100rem - var(--scrollbar-width))* .8333)}.bootstrap-grid__col--sm--11{max-width:91.66rem;max-width:calc((100rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid__offset--sm--11{margin-left:91.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .9166)}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--1{grid-column:12/span 1}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--2{grid-column:12/span 2}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--3{grid-column:12/span 3}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--4{grid-column:12/span 4}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--5{grid-column:12/span 5}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--6{grid-column:12/span 6}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--7{grid-column:12/span 7}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--8{grid-column:12/span 8}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--9{grid-column:12/span 9}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--10{grid-column:12/span 10}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--11{grid-column:12/span 11}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--12{grid-column:12/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:91.66rem;max-height:calc((100rem - var(--scrollbar-width))* .9166)}.bootstrap-grid__col--sm--12{max-width:100rem;max-width:calc((100rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid__offset--sm--12{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--1{grid-column:13/span 1}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--2{grid-column:13/span 2}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--3{grid-column:13/span 3}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--4{grid-column:13/span 4}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--5{grid-column:13/span 5}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--6{grid-column:13/span 6}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--7{grid-column:13/span 7}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--8{grid-column:13/span 8}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--9{grid-column:13/span 9}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--10{grid-column:13/span 10}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--11{grid-column:13/span 11}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--12{grid-column:13/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:100rem;max-height:calc((100rem - var(--scrollbar-width))* 1)}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial;margin-left:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.css index 0d3f2be..f29d26b 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.css @@ -209,6 +209,42 @@ body { .bootstrap-grid__col--sm--1.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 1; } +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--1 { + grid-column: 2 / span 1; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--2 { + grid-column: 2 / span 2; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--3 { + grid-column: 2 / span 3; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--4 { + grid-column: 2 / span 4; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--5 { + grid-column: 2 / span 5; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--6 { + grid-column: 2 / span 6; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--7 { + grid-column: 2 / span 7; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--8 { + grid-column: 2 / span 8; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--9 { + grid-column: 2 / span 9; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--10 { + grid-column: 2 / span 10; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--11 { + grid-column: 2 / span 11; } + +.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--12 { + grid-column: 2 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--1 { grid-row: span 1; } @@ -218,6 +254,42 @@ body { .bootstrap-grid__col--sm--2.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 2; } +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--1 { + grid-column: 3 / span 1; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--2 { + grid-column: 3 / span 2; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--3 { + grid-column: 3 / span 3; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--4 { + grid-column: 3 / span 4; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--5 { + grid-column: 3 / span 5; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--6 { + grid-column: 3 / span 6; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--7 { + grid-column: 3 / span 7; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--8 { + grid-column: 3 / span 8; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--9 { + grid-column: 3 / span 9; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--10 { + grid-column: 3 / span 10; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--11 { + grid-column: 3 / span 11; } + +.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--12 { + grid-column: 3 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--2 { grid-row: span 2; } @@ -227,6 +299,42 @@ body { .bootstrap-grid__col--sm--3.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 3; } +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--1 { + grid-column: 4 / span 1; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--2 { + grid-column: 4 / span 2; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--3 { + grid-column: 4 / span 3; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--4 { + grid-column: 4 / span 4; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--5 { + grid-column: 4 / span 5; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--6 { + grid-column: 4 / span 6; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--7 { + grid-column: 4 / span 7; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--8 { + grid-column: 4 / span 8; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--9 { + grid-column: 4 / span 9; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--10 { + grid-column: 4 / span 10; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--11 { + grid-column: 4 / span 11; } + +.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--12 { + grid-column: 4 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--3 { grid-row: span 3; } @@ -236,6 +344,42 @@ body { .bootstrap-grid__col--sm--4.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 4; } +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--1 { + grid-column: 5 / span 1; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--2 { + grid-column: 5 / span 2; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--3 { + grid-column: 5 / span 3; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--4 { + grid-column: 5 / span 4; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--5 { + grid-column: 5 / span 5; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--6 { + grid-column: 5 / span 6; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--7 { + grid-column: 5 / span 7; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--8 { + grid-column: 5 / span 8; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--9 { + grid-column: 5 / span 9; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--10 { + grid-column: 5 / span 10; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--11 { + grid-column: 5 / span 11; } + +.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--12 { + grid-column: 5 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--4 { grid-row: span 4; } @@ -245,6 +389,42 @@ body { .bootstrap-grid__col--sm--5.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 5; } +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--1 { + grid-column: 6 / span 1; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--2 { + grid-column: 6 / span 2; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--3 { + grid-column: 6 / span 3; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--4 { + grid-column: 6 / span 4; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--5 { + grid-column: 6 / span 5; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--6 { + grid-column: 6 / span 6; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--7 { + grid-column: 6 / span 7; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--8 { + grid-column: 6 / span 8; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--9 { + grid-column: 6 / span 9; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--10 { + grid-column: 6 / span 10; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--11 { + grid-column: 6 / span 11; } + +.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--12 { + grid-column: 6 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--5 { grid-row: span 5; } @@ -254,6 +434,42 @@ body { .bootstrap-grid__col--sm--6.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 6; } +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--1 { + grid-column: 7 / span 1; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--2 { + grid-column: 7 / span 2; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--3 { + grid-column: 7 / span 3; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--4 { + grid-column: 7 / span 4; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--5 { + grid-column: 7 / span 5; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--6 { + grid-column: 7 / span 6; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--7 { + grid-column: 7 / span 7; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--8 { + grid-column: 7 / span 8; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--9 { + grid-column: 7 / span 9; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--10 { + grid-column: 7 / span 10; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--11 { + grid-column: 7 / span 11; } + +.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--12 { + grid-column: 7 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--6 { grid-row: span 6; } @@ -263,6 +479,42 @@ body { .bootstrap-grid__col--sm--7.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 7; } +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--1 { + grid-column: 8 / span 1; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--2 { + grid-column: 8 / span 2; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--3 { + grid-column: 8 / span 3; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--4 { + grid-column: 8 / span 4; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--5 { + grid-column: 8 / span 5; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--6 { + grid-column: 8 / span 6; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--7 { + grid-column: 8 / span 7; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--8 { + grid-column: 8 / span 8; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--9 { + grid-column: 8 / span 9; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--10 { + grid-column: 8 / span 10; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--11 { + grid-column: 8 / span 11; } + +.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--12 { + grid-column: 8 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--7 { grid-row: span 7; } @@ -272,6 +524,42 @@ body { .bootstrap-grid__col--sm--8.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 8; } +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--1 { + grid-column: 9 / span 1; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--2 { + grid-column: 9 / span 2; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--3 { + grid-column: 9 / span 3; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--4 { + grid-column: 9 / span 4; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--5 { + grid-column: 9 / span 5; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--6 { + grid-column: 9 / span 6; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--7 { + grid-column: 9 / span 7; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--8 { + grid-column: 9 / span 8; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--9 { + grid-column: 9 / span 9; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--10 { + grid-column: 9 / span 10; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--11 { + grid-column: 9 / span 11; } + +.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--12 { + grid-column: 9 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--8 { grid-row: span 8; } @@ -281,6 +569,42 @@ body { .bootstrap-grid__col--sm--9.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 9; } +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--1 { + grid-column: 10 / span 1; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--2 { + grid-column: 10 / span 2; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--3 { + grid-column: 10 / span 3; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--4 { + grid-column: 10 / span 4; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--5 { + grid-column: 10 / span 5; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--6 { + grid-column: 10 / span 6; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--7 { + grid-column: 10 / span 7; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--8 { + grid-column: 10 / span 8; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--9 { + grid-column: 10 / span 9; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--10 { + grid-column: 10 / span 10; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--11 { + grid-column: 10 / span 11; } + +.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--12 { + grid-column: 10 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--9 { grid-row: span 9; } @@ -290,6 +614,42 @@ body { .bootstrap-grid__col--sm--10.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 10; } +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--1 { + grid-column: 11 / span 1; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--2 { + grid-column: 11 / span 2; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--3 { + grid-column: 11 / span 3; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--4 { + grid-column: 11 / span 4; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--5 { + grid-column: 11 / span 5; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--6 { + grid-column: 11 / span 6; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--7 { + grid-column: 11 / span 7; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--8 { + grid-column: 11 / span 8; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--9 { + grid-column: 11 / span 9; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--10 { + grid-column: 11 / span 10; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--11 { + grid-column: 11 / span 11; } + +.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--12 { + grid-column: 11 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--10 { grid-row: span 10; } @@ -299,6 +659,42 @@ body { .bootstrap-grid__col--sm--11.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 11; } +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--1 { + grid-column: 12 / span 1; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--2 { + grid-column: 12 / span 2; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--3 { + grid-column: 12 / span 3; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--4 { + grid-column: 12 / span 4; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--5 { + grid-column: 12 / span 5; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--6 { + grid-column: 12 / span 6; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--7 { + grid-column: 12 / span 7; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--8 { + grid-column: 12 / span 8; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--9 { + grid-column: 12 / span 9; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--10 { + grid-column: 12 / span 10; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--11 { + grid-column: 12 / span 11; } + +.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--12 { + grid-column: 12 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--11 { grid-row: span 11; } @@ -308,6 +704,42 @@ body { .bootstrap-grid__col--sm--12.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 12; } +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--1 { + grid-column: 13 / span 1; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--2 { + grid-column: 13 / span 2; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--3 { + grid-column: 13 / span 3; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--4 { + grid-column: 13 / span 4; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--5 { + grid-column: 13 / span 5; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--6 { + grid-column: 13 / span 6; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--7 { + grid-column: 13 / span 7; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--8 { + grid-column: 13 / span 8; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--9 { + grid-column: 13 / span 9; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--10 { + grid-column: 13 / span 10; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--11 { + grid-column: 13 / span 11; } + +.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--12 { + grid-column: 13 / span 12; } + .bootstrap-grid--fluid-rows > .bootstrap-grid__height--sm--12 { grid-row: span 12; } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css index f914aaa..6f6ae5e 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css @@ -1 +1 @@ -html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--1{grid-column:2/span 1}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--2{grid-column:2/span 2}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--3{grid-column:2/span 3}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--4{grid-column:2/span 4}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--5{grid-column:2/span 5}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--6{grid-column:2/span 6}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--7{grid-column:2/span 7}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--8{grid-column:2/span 8}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--9{grid-column:2/span 9}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--10{grid-column:2/span 10}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--11{grid-column:2/span 11}.bootstrap-grid__offset--sm--1.bootstrap-grid__col--sm--12{grid-column:2/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--1{grid-column:3/span 1}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--2{grid-column:3/span 2}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--3{grid-column:3/span 3}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--4{grid-column:3/span 4}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--5{grid-column:3/span 5}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--6{grid-column:3/span 6}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--7{grid-column:3/span 7}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--8{grid-column:3/span 8}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--9{grid-column:3/span 9}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--10{grid-column:3/span 10}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--11{grid-column:3/span 11}.bootstrap-grid__offset--sm--2.bootstrap-grid__col--sm--12{grid-column:3/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--1{grid-column:4/span 1}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--2{grid-column:4/span 2}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--3{grid-column:4/span 3}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--4{grid-column:4/span 4}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--5{grid-column:4/span 5}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--6{grid-column:4/span 6}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--7{grid-column:4/span 7}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--8{grid-column:4/span 8}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--9{grid-column:4/span 9}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--10{grid-column:4/span 10}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--11{grid-column:4/span 11}.bootstrap-grid__offset--sm--3.bootstrap-grid__col--sm--12{grid-column:4/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--1{grid-column:5/span 1}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--2{grid-column:5/span 2}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--3{grid-column:5/span 3}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--4{grid-column:5/span 4}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--5{grid-column:5/span 5}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--6{grid-column:5/span 6}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--7{grid-column:5/span 7}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--8{grid-column:5/span 8}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--9{grid-column:5/span 9}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--10{grid-column:5/span 10}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--11{grid-column:5/span 11}.bootstrap-grid__offset--sm--4.bootstrap-grid__col--sm--12{grid-column:5/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--1{grid-column:6/span 1}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--2{grid-column:6/span 2}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--3{grid-column:6/span 3}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--4{grid-column:6/span 4}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--5{grid-column:6/span 5}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--6{grid-column:6/span 6}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--7{grid-column:6/span 7}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--8{grid-column:6/span 8}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--9{grid-column:6/span 9}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--10{grid-column:6/span 10}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--11{grid-column:6/span 11}.bootstrap-grid__offset--sm--5.bootstrap-grid__col--sm--12{grid-column:6/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--1{grid-column:7/span 1}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--2{grid-column:7/span 2}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--3{grid-column:7/span 3}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--4{grid-column:7/span 4}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--5{grid-column:7/span 5}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--6{grid-column:7/span 6}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--7{grid-column:7/span 7}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--8{grid-column:7/span 8}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--9{grid-column:7/span 9}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--10{grid-column:7/span 10}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--11{grid-column:7/span 11}.bootstrap-grid__offset--sm--6.bootstrap-grid__col--sm--12{grid-column:7/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--1{grid-column:8/span 1}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--2{grid-column:8/span 2}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--3{grid-column:8/span 3}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--4{grid-column:8/span 4}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--5{grid-column:8/span 5}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--6{grid-column:8/span 6}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--7{grid-column:8/span 7}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--8{grid-column:8/span 8}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--9{grid-column:8/span 9}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--10{grid-column:8/span 10}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--11{grid-column:8/span 11}.bootstrap-grid__offset--sm--7.bootstrap-grid__col--sm--12{grid-column:8/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--1{grid-column:9/span 1}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--2{grid-column:9/span 2}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--3{grid-column:9/span 3}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--4{grid-column:9/span 4}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--5{grid-column:9/span 5}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--6{grid-column:9/span 6}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--7{grid-column:9/span 7}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--8{grid-column:9/span 8}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--9{grid-column:9/span 9}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--10{grid-column:9/span 10}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--11{grid-column:9/span 11}.bootstrap-grid__offset--sm--8.bootstrap-grid__col--sm--12{grid-column:9/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--1{grid-column:10/span 1}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--2{grid-column:10/span 2}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--3{grid-column:10/span 3}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--4{grid-column:10/span 4}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--5{grid-column:10/span 5}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--6{grid-column:10/span 6}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--7{grid-column:10/span 7}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--8{grid-column:10/span 8}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--9{grid-column:10/span 9}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--10{grid-column:10/span 10}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--11{grid-column:10/span 11}.bootstrap-grid__offset--sm--9.bootstrap-grid__col--sm--12{grid-column:10/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--1{grid-column:11/span 1}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--2{grid-column:11/span 2}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--3{grid-column:11/span 3}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--4{grid-column:11/span 4}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--5{grid-column:11/span 5}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--6{grid-column:11/span 6}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--7{grid-column:11/span 7}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--8{grid-column:11/span 8}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--9{grid-column:11/span 9}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--10{grid-column:11/span 10}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--11{grid-column:11/span 11}.bootstrap-grid__offset--sm--10.bootstrap-grid__col--sm--12{grid-column:11/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--1{grid-column:12/span 1}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--2{grid-column:12/span 2}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--3{grid-column:12/span 3}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--4{grid-column:12/span 4}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--5{grid-column:12/span 5}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--6{grid-column:12/span 6}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--7{grid-column:12/span 7}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--8{grid-column:12/span 8}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--9{grid-column:12/span 9}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--10{grid-column:12/span 10}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--11{grid-column:12/span 11}.bootstrap-grid__offset--sm--11.bootstrap-grid__col--sm--12{grid-column:12/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--1{grid-column:13/span 1}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--2{grid-column:13/span 2}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--3{grid-column:13/span 3}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--4{grid-column:13/span 4}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--5{grid-column:13/span 5}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--6{grid-column:13/span 6}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--7{grid-column:13/span 7}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--8{grid-column:13/span 8}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--9{grid-column:13/span 9}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--10{grid-column:13/span 10}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--11{grid-column:13/span 11}.bootstrap-grid__offset--sm--12.bootstrap-grid__col--sm--12{grid-column:13/span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/scss/_mixins.scss b/examples/bootstrap/css-gridish/scss/_mixins.scss index 0851a57..6ce95f6 100755 --- a/examples/bootstrap/css-gridish/scss/_mixins.scss +++ b/examples/bootstrap/css-gridish/scss/_mixins.scss @@ -95,6 +95,19 @@ } } + .#{$prefix}-grid__offset--#{$currentName}--#{$i} { + @if $includeFlexFallback { + margin-left: $columnSize; + margin-left: $columnSizeScrollbar; + } + + @for $j from 1 through map-get($currentBreakpoint, columns) { + &.#{$prefix}-grid__col--#{$currentName}--#{$j} { + grid-column: #{$i + 1} / span #{$j}; + } + } + } + .#{$prefix}-grid--fluid-rows > .#{$prefix}-grid__height--#{$currentName}--#{$i} { grid-row: span $i; diff --git a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss index 7f14ce0..dda5c29 100755 --- a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss +++ b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss @@ -7,6 +7,7 @@ $includeFlexFallback: true; min-width: initial; max-width: initial; width: initial; + margin-left: initial; &.#{$prefix}-grid { display: grid; diff --git a/examples/carbon/css-gridish/bx-grid.sketch b/examples/carbon/css-gridish/bx-grid.sketch index efaeb99..31c2dde 100644 Binary files a/examples/carbon/css-gridish/bx-grid.sketch and b/examples/carbon/css-gridish/bx-grid.sketch differ diff --git a/examples/carbon/css-gridish/css/bx-grid-legacy.css b/examples/carbon/css-gridish/css/bx-grid-legacy.css index 8dea787..bae55cf 100755 --- a/examples/carbon/css-gridish/css/bx-grid-legacy.css +++ b/examples/carbon/css-gridish/css/bx-grid-legacy.css @@ -283,6 +283,34 @@ body { .bx-grid__col--sm--1.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 1; } +.bx-grid__offset--sm--1 { + margin-left: calc((100vw - 10vw) * 0.0833); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833); } + .bx-grid__offset--sm--1.bx-grid__col--sm--1 { + grid-column: 2 / span 1; } + .bx-grid__offset--sm--1.bx-grid__col--sm--2 { + grid-column: 2 / span 2; } + .bx-grid__offset--sm--1.bx-grid__col--sm--3 { + grid-column: 2 / span 3; } + .bx-grid__offset--sm--1.bx-grid__col--sm--4 { + grid-column: 2 / span 4; } + .bx-grid__offset--sm--1.bx-grid__col--sm--5 { + grid-column: 2 / span 5; } + .bx-grid__offset--sm--1.bx-grid__col--sm--6 { + grid-column: 2 / span 6; } + .bx-grid__offset--sm--1.bx-grid__col--sm--7 { + grid-column: 2 / span 7; } + .bx-grid__offset--sm--1.bx-grid__col--sm--8 { + grid-column: 2 / span 8; } + .bx-grid__offset--sm--1.bx-grid__col--sm--9 { + grid-column: 2 / span 9; } + .bx-grid__offset--sm--1.bx-grid__col--sm--10 { + grid-column: 2 / span 10; } + .bx-grid__offset--sm--1.bx-grid__col--sm--11 { + grid-column: 2 / span 11; } + .bx-grid__offset--sm--1.bx-grid__col--sm--12 { + grid-column: 2 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--1 { grid-row: span 1; @@ -302,6 +330,34 @@ body { .bx-grid__col--sm--2.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 2; } +.bx-grid__offset--sm--2 { + margin-left: calc((100vw - 10vw) * 0.1666); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.1666); } + .bx-grid__offset--sm--2.bx-grid__col--sm--1 { + grid-column: 3 / span 1; } + .bx-grid__offset--sm--2.bx-grid__col--sm--2 { + grid-column: 3 / span 2; } + .bx-grid__offset--sm--2.bx-grid__col--sm--3 { + grid-column: 3 / span 3; } + .bx-grid__offset--sm--2.bx-grid__col--sm--4 { + grid-column: 3 / span 4; } + .bx-grid__offset--sm--2.bx-grid__col--sm--5 { + grid-column: 3 / span 5; } + .bx-grid__offset--sm--2.bx-grid__col--sm--6 { + grid-column: 3 / span 6; } + .bx-grid__offset--sm--2.bx-grid__col--sm--7 { + grid-column: 3 / span 7; } + .bx-grid__offset--sm--2.bx-grid__col--sm--8 { + grid-column: 3 / span 8; } + .bx-grid__offset--sm--2.bx-grid__col--sm--9 { + grid-column: 3 / span 9; } + .bx-grid__offset--sm--2.bx-grid__col--sm--10 { + grid-column: 3 / span 10; } + .bx-grid__offset--sm--2.bx-grid__col--sm--11 { + grid-column: 3 / span 11; } + .bx-grid__offset--sm--2.bx-grid__col--sm--12 { + grid-column: 3 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--2 { grid-row: span 2; @@ -321,6 +377,34 @@ body { .bx-grid__col--sm--3.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 3; } +.bx-grid__offset--sm--3 { + margin-left: calc((100vw - 10vw) * 0.25); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.25); } + .bx-grid__offset--sm--3.bx-grid__col--sm--1 { + grid-column: 4 / span 1; } + .bx-grid__offset--sm--3.bx-grid__col--sm--2 { + grid-column: 4 / span 2; } + .bx-grid__offset--sm--3.bx-grid__col--sm--3 { + grid-column: 4 / span 3; } + .bx-grid__offset--sm--3.bx-grid__col--sm--4 { + grid-column: 4 / span 4; } + .bx-grid__offset--sm--3.bx-grid__col--sm--5 { + grid-column: 4 / span 5; } + .bx-grid__offset--sm--3.bx-grid__col--sm--6 { + grid-column: 4 / span 6; } + .bx-grid__offset--sm--3.bx-grid__col--sm--7 { + grid-column: 4 / span 7; } + .bx-grid__offset--sm--3.bx-grid__col--sm--8 { + grid-column: 4 / span 8; } + .bx-grid__offset--sm--3.bx-grid__col--sm--9 { + grid-column: 4 / span 9; } + .bx-grid__offset--sm--3.bx-grid__col--sm--10 { + grid-column: 4 / span 10; } + .bx-grid__offset--sm--3.bx-grid__col--sm--11 { + grid-column: 4 / span 11; } + .bx-grid__offset--sm--3.bx-grid__col--sm--12 { + grid-column: 4 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--3 { grid-row: span 3; @@ -340,6 +424,34 @@ body { .bx-grid__col--sm--4.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 4; } +.bx-grid__offset--sm--4 { + margin-left: calc((100vw - 10vw) * 0.3333); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.3333); } + .bx-grid__offset--sm--4.bx-grid__col--sm--1 { + grid-column: 5 / span 1; } + .bx-grid__offset--sm--4.bx-grid__col--sm--2 { + grid-column: 5 / span 2; } + .bx-grid__offset--sm--4.bx-grid__col--sm--3 { + grid-column: 5 / span 3; } + .bx-grid__offset--sm--4.bx-grid__col--sm--4 { + grid-column: 5 / span 4; } + .bx-grid__offset--sm--4.bx-grid__col--sm--5 { + grid-column: 5 / span 5; } + .bx-grid__offset--sm--4.bx-grid__col--sm--6 { + grid-column: 5 / span 6; } + .bx-grid__offset--sm--4.bx-grid__col--sm--7 { + grid-column: 5 / span 7; } + .bx-grid__offset--sm--4.bx-grid__col--sm--8 { + grid-column: 5 / span 8; } + .bx-grid__offset--sm--4.bx-grid__col--sm--9 { + grid-column: 5 / span 9; } + .bx-grid__offset--sm--4.bx-grid__col--sm--10 { + grid-column: 5 / span 10; } + .bx-grid__offset--sm--4.bx-grid__col--sm--11 { + grid-column: 5 / span 11; } + .bx-grid__offset--sm--4.bx-grid__col--sm--12 { + grid-column: 5 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--4 { grid-row: span 4; @@ -359,6 +471,34 @@ body { .bx-grid__col--sm--5.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 5; } +.bx-grid__offset--sm--5 { + margin-left: calc((100vw - 10vw) * 0.4166); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.4166); } + .bx-grid__offset--sm--5.bx-grid__col--sm--1 { + grid-column: 6 / span 1; } + .bx-grid__offset--sm--5.bx-grid__col--sm--2 { + grid-column: 6 / span 2; } + .bx-grid__offset--sm--5.bx-grid__col--sm--3 { + grid-column: 6 / span 3; } + .bx-grid__offset--sm--5.bx-grid__col--sm--4 { + grid-column: 6 / span 4; } + .bx-grid__offset--sm--5.bx-grid__col--sm--5 { + grid-column: 6 / span 5; } + .bx-grid__offset--sm--5.bx-grid__col--sm--6 { + grid-column: 6 / span 6; } + .bx-grid__offset--sm--5.bx-grid__col--sm--7 { + grid-column: 6 / span 7; } + .bx-grid__offset--sm--5.bx-grid__col--sm--8 { + grid-column: 6 / span 8; } + .bx-grid__offset--sm--5.bx-grid__col--sm--9 { + grid-column: 6 / span 9; } + .bx-grid__offset--sm--5.bx-grid__col--sm--10 { + grid-column: 6 / span 10; } + .bx-grid__offset--sm--5.bx-grid__col--sm--11 { + grid-column: 6 / span 11; } + .bx-grid__offset--sm--5.bx-grid__col--sm--12 { + grid-column: 6 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--5 { grid-row: span 5; @@ -378,6 +518,34 @@ body { .bx-grid__col--sm--6.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 6; } +.bx-grid__offset--sm--6 { + margin-left: calc((100vw - 10vw) * 0.5); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5); } + .bx-grid__offset--sm--6.bx-grid__col--sm--1 { + grid-column: 7 / span 1; } + .bx-grid__offset--sm--6.bx-grid__col--sm--2 { + grid-column: 7 / span 2; } + .bx-grid__offset--sm--6.bx-grid__col--sm--3 { + grid-column: 7 / span 3; } + .bx-grid__offset--sm--6.bx-grid__col--sm--4 { + grid-column: 7 / span 4; } + .bx-grid__offset--sm--6.bx-grid__col--sm--5 { + grid-column: 7 / span 5; } + .bx-grid__offset--sm--6.bx-grid__col--sm--6 { + grid-column: 7 / span 6; } + .bx-grid__offset--sm--6.bx-grid__col--sm--7 { + grid-column: 7 / span 7; } + .bx-grid__offset--sm--6.bx-grid__col--sm--8 { + grid-column: 7 / span 8; } + .bx-grid__offset--sm--6.bx-grid__col--sm--9 { + grid-column: 7 / span 9; } + .bx-grid__offset--sm--6.bx-grid__col--sm--10 { + grid-column: 7 / span 10; } + .bx-grid__offset--sm--6.bx-grid__col--sm--11 { + grid-column: 7 / span 11; } + .bx-grid__offset--sm--6.bx-grid__col--sm--12 { + grid-column: 7 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--6 { grid-row: span 6; @@ -397,6 +565,34 @@ body { .bx-grid__col--sm--7.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 7; } +.bx-grid__offset--sm--7 { + margin-left: calc((100vw - 10vw) * 0.5833); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5833); } + .bx-grid__offset--sm--7.bx-grid__col--sm--1 { + grid-column: 8 / span 1; } + .bx-grid__offset--sm--7.bx-grid__col--sm--2 { + grid-column: 8 / span 2; } + .bx-grid__offset--sm--7.bx-grid__col--sm--3 { + grid-column: 8 / span 3; } + .bx-grid__offset--sm--7.bx-grid__col--sm--4 { + grid-column: 8 / span 4; } + .bx-grid__offset--sm--7.bx-grid__col--sm--5 { + grid-column: 8 / span 5; } + .bx-grid__offset--sm--7.bx-grid__col--sm--6 { + grid-column: 8 / span 6; } + .bx-grid__offset--sm--7.bx-grid__col--sm--7 { + grid-column: 8 / span 7; } + .bx-grid__offset--sm--7.bx-grid__col--sm--8 { + grid-column: 8 / span 8; } + .bx-grid__offset--sm--7.bx-grid__col--sm--9 { + grid-column: 8 / span 9; } + .bx-grid__offset--sm--7.bx-grid__col--sm--10 { + grid-column: 8 / span 10; } + .bx-grid__offset--sm--7.bx-grid__col--sm--11 { + grid-column: 8 / span 11; } + .bx-grid__offset--sm--7.bx-grid__col--sm--12 { + grid-column: 8 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--7 { grid-row: span 7; @@ -416,6 +612,34 @@ body { .bx-grid__col--sm--8.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 8; } +.bx-grid__offset--sm--8 { + margin-left: calc((100vw - 10vw) * 0.6666); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.6666); } + .bx-grid__offset--sm--8.bx-grid__col--sm--1 { + grid-column: 9 / span 1; } + .bx-grid__offset--sm--8.bx-grid__col--sm--2 { + grid-column: 9 / span 2; } + .bx-grid__offset--sm--8.bx-grid__col--sm--3 { + grid-column: 9 / span 3; } + .bx-grid__offset--sm--8.bx-grid__col--sm--4 { + grid-column: 9 / span 4; } + .bx-grid__offset--sm--8.bx-grid__col--sm--5 { + grid-column: 9 / span 5; } + .bx-grid__offset--sm--8.bx-grid__col--sm--6 { + grid-column: 9 / span 6; } + .bx-grid__offset--sm--8.bx-grid__col--sm--7 { + grid-column: 9 / span 7; } + .bx-grid__offset--sm--8.bx-grid__col--sm--8 { + grid-column: 9 / span 8; } + .bx-grid__offset--sm--8.bx-grid__col--sm--9 { + grid-column: 9 / span 9; } + .bx-grid__offset--sm--8.bx-grid__col--sm--10 { + grid-column: 9 / span 10; } + .bx-grid__offset--sm--8.bx-grid__col--sm--11 { + grid-column: 9 / span 11; } + .bx-grid__offset--sm--8.bx-grid__col--sm--12 { + grid-column: 9 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--8 { grid-row: span 8; @@ -435,6 +659,34 @@ body { .bx-grid__col--sm--9.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 9; } +.bx-grid__offset--sm--9 { + margin-left: calc((100vw - 10vw) * 0.75); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.75); } + .bx-grid__offset--sm--9.bx-grid__col--sm--1 { + grid-column: 10 / span 1; } + .bx-grid__offset--sm--9.bx-grid__col--sm--2 { + grid-column: 10 / span 2; } + .bx-grid__offset--sm--9.bx-grid__col--sm--3 { + grid-column: 10 / span 3; } + .bx-grid__offset--sm--9.bx-grid__col--sm--4 { + grid-column: 10 / span 4; } + .bx-grid__offset--sm--9.bx-grid__col--sm--5 { + grid-column: 10 / span 5; } + .bx-grid__offset--sm--9.bx-grid__col--sm--6 { + grid-column: 10 / span 6; } + .bx-grid__offset--sm--9.bx-grid__col--sm--7 { + grid-column: 10 / span 7; } + .bx-grid__offset--sm--9.bx-grid__col--sm--8 { + grid-column: 10 / span 8; } + .bx-grid__offset--sm--9.bx-grid__col--sm--9 { + grid-column: 10 / span 9; } + .bx-grid__offset--sm--9.bx-grid__col--sm--10 { + grid-column: 10 / span 10; } + .bx-grid__offset--sm--9.bx-grid__col--sm--11 { + grid-column: 10 / span 11; } + .bx-grid__offset--sm--9.bx-grid__col--sm--12 { + grid-column: 10 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--9 { grid-row: span 9; @@ -454,6 +706,34 @@ body { .bx-grid__col--sm--10.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 10; } +.bx-grid__offset--sm--10 { + margin-left: calc((100vw - 10vw) * 0.8333); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.8333); } + .bx-grid__offset--sm--10.bx-grid__col--sm--1 { + grid-column: 11 / span 1; } + .bx-grid__offset--sm--10.bx-grid__col--sm--2 { + grid-column: 11 / span 2; } + .bx-grid__offset--sm--10.bx-grid__col--sm--3 { + grid-column: 11 / span 3; } + .bx-grid__offset--sm--10.bx-grid__col--sm--4 { + grid-column: 11 / span 4; } + .bx-grid__offset--sm--10.bx-grid__col--sm--5 { + grid-column: 11 / span 5; } + .bx-grid__offset--sm--10.bx-grid__col--sm--6 { + grid-column: 11 / span 6; } + .bx-grid__offset--sm--10.bx-grid__col--sm--7 { + grid-column: 11 / span 7; } + .bx-grid__offset--sm--10.bx-grid__col--sm--8 { + grid-column: 11 / span 8; } + .bx-grid__offset--sm--10.bx-grid__col--sm--9 { + grid-column: 11 / span 9; } + .bx-grid__offset--sm--10.bx-grid__col--sm--10 { + grid-column: 11 / span 10; } + .bx-grid__offset--sm--10.bx-grid__col--sm--11 { + grid-column: 11 / span 11; } + .bx-grid__offset--sm--10.bx-grid__col--sm--12 { + grid-column: 11 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--10 { grid-row: span 10; @@ -473,6 +753,34 @@ body { .bx-grid__col--sm--11.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 11; } +.bx-grid__offset--sm--11 { + margin-left: calc((100vw - 10vw) * 0.9166); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.9166); } + .bx-grid__offset--sm--11.bx-grid__col--sm--1 { + grid-column: 12 / span 1; } + .bx-grid__offset--sm--11.bx-grid__col--sm--2 { + grid-column: 12 / span 2; } + .bx-grid__offset--sm--11.bx-grid__col--sm--3 { + grid-column: 12 / span 3; } + .bx-grid__offset--sm--11.bx-grid__col--sm--4 { + grid-column: 12 / span 4; } + .bx-grid__offset--sm--11.bx-grid__col--sm--5 { + grid-column: 12 / span 5; } + .bx-grid__offset--sm--11.bx-grid__col--sm--6 { + grid-column: 12 / span 6; } + .bx-grid__offset--sm--11.bx-grid__col--sm--7 { + grid-column: 12 / span 7; } + .bx-grid__offset--sm--11.bx-grid__col--sm--8 { + grid-column: 12 / span 8; } + .bx-grid__offset--sm--11.bx-grid__col--sm--9 { + grid-column: 12 / span 9; } + .bx-grid__offset--sm--11.bx-grid__col--sm--10 { + grid-column: 12 / span 10; } + .bx-grid__offset--sm--11.bx-grid__col--sm--11 { + grid-column: 12 / span 11; } + .bx-grid__offset--sm--11.bx-grid__col--sm--12 { + grid-column: 12 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--11 { grid-row: span 11; @@ -492,6 +800,34 @@ body { .bx-grid__col--sm--12.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 12; } +.bx-grid__offset--sm--12 { + margin-left: calc((100vw - 10vw) * 1); + margin-left: calc(((100vw - var(--scrollbar-width)) - 10vw) * 1); } + .bx-grid__offset--sm--12.bx-grid__col--sm--1 { + grid-column: 13 / span 1; } + .bx-grid__offset--sm--12.bx-grid__col--sm--2 { + grid-column: 13 / span 2; } + .bx-grid__offset--sm--12.bx-grid__col--sm--3 { + grid-column: 13 / span 3; } + .bx-grid__offset--sm--12.bx-grid__col--sm--4 { + grid-column: 13 / span 4; } + .bx-grid__offset--sm--12.bx-grid__col--sm--5 { + grid-column: 13 / span 5; } + .bx-grid__offset--sm--12.bx-grid__col--sm--6 { + grid-column: 13 / span 6; } + .bx-grid__offset--sm--12.bx-grid__col--sm--7 { + grid-column: 13 / span 7; } + .bx-grid__offset--sm--12.bx-grid__col--sm--8 { + grid-column: 13 / span 8; } + .bx-grid__offset--sm--12.bx-grid__col--sm--9 { + grid-column: 13 / span 9; } + .bx-grid__offset--sm--12.bx-grid__col--sm--10 { + grid-column: 13 / span 10; } + .bx-grid__offset--sm--12.bx-grid__col--sm--11 { + grid-column: 13 / span 11; } + .bx-grid__offset--sm--12.bx-grid__col--sm--12 { + grid-column: 13 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--12 { grid-row: span 12; @@ -615,7 +951,8 @@ body { .bx-grid > [class*="bx-grid__col--"] { min-width: initial; max-width: initial; - width: initial; } + width: initial; + margin-left: initial; } .bx-grid > *.bx-grid, .bx-grid > [class*="bx-grid__col--"].bx-grid { display: grid; } diff --git a/examples/carbon/css-gridish/css/bx-grid-legacy.min.css b/examples/carbon/css-gridish/css/bx-grid-legacy.min.css index 54ac910..bad5852 100755 --- a/examples/carbon/css-gridish/css/bx-grid-legacy.min.css +++ b/examples/carbon/css-gridish/css/bx-grid-legacy.min.css @@ -1 +1 @@ -html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bx-grid{align-items:unset}.bx-grid>*{width:initial;height:100%}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1;height:.5rem;min-height:.5rem}.bx-grid__height--sm--2{grid-row:span 2;height:1rem;min-height:1rem}.bx-grid__height--sm--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.bx-grid__height--sm--4{grid-row:span 4;height:2rem;min-height:2rem}.bx-grid__height--sm--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.bx-grid__height--sm--6{grid-row:span 6;height:3rem;min-height:3rem}.bx-grid__height--sm--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.bx-grid__height--sm--8{grid-row:span 8;height:4rem;min-height:4rem}.bx-grid__height--sm--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.bx-grid__height--sm--10{grid-row:span 10;height:5rem;min-height:5rem}.bx-grid__height--sm--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.bx-grid__height--sm--12{grid-row:span 12;height:6rem;min-height:6rem}.bx-grid__height--sm--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.bx-grid__height--sm--14{grid-row:span 14;height:7rem;min-height:7rem}.bx-grid__height--sm--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.bx-grid__height--sm--16{grid-row:span 16;height:8rem;min-height:8rem}.bx-grid__height--sm--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.bx-grid__height--sm--18{grid-row:span 18;height:9rem;min-height:9rem}.bx-grid__height--sm--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.bx-grid__height--sm--20{grid-row:span 20;height:10rem;min-height:10rem}.bx-grid__height--sm--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.bx-grid__height--sm--22{grid-row:span 22;height:11rem;min-height:11rem}.bx-grid__height--sm--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.bx-grid__height--sm--24{grid-row:span 24;height:12rem;min-height:12rem}.bx-grid__height--sm--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.bx-grid__height--sm--26{grid-row:span 26;height:13rem;min-height:13rem}.bx-grid__height--sm--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.bx-grid__height--sm--28{grid-row:span 28;height:14rem;min-height:14rem}.bx-grid__height--sm--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1{max-width:calc((100rem - 10vw) * .0833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833);width:calc((100vw - 10vw) * .0833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);grid-column:span 1}.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1;height:calc((100vw - 10vw) * .0833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);min-height:calc((100vw - 10vw) * .0833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);max-height:calc((100rem - 10vw) * .0833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--2{max-width:calc((100rem - 10vw) * .1666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666);width:calc((100vw - 10vw) * .1666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);grid-column:span 2}.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2;height:calc((100vw - 10vw) * .1666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);min-height:calc((100vw - 10vw) * .1666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);max-height:calc((100rem - 10vw) * .1666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666)}.bx-grid__col--sm--3{max-width:calc((100rem - 10vw) * .25);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25);width:calc((100vw - 10vw) * .25);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);grid-column:span 3}.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3;height:calc((100vw - 10vw) * .25);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);min-height:calc((100vw - 10vw) * .25);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);max-height:calc((100rem - 10vw) * .25);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25)}.bx-grid__col--sm--4{max-width:calc((100rem - 10vw) * .3333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333);width:calc((100vw - 10vw) * .3333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);grid-column:span 4}.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4;height:calc((100vw - 10vw) * .3333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);min-height:calc((100vw - 10vw) * .3333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);max-height:calc((100rem - 10vw) * .3333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333)}.bx-grid__col--sm--5{max-width:calc((100rem - 10vw) * .4166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166);width:calc((100vw - 10vw) * .4166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);grid-column:span 5}.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5;height:calc((100vw - 10vw) * .4166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);min-height:calc((100vw - 10vw) * .4166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);max-height:calc((100rem - 10vw) * .4166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166)}.bx-grid__col--sm--6{max-width:calc((100rem - 10vw) * .5);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5);width:calc((100vw - 10vw) * .5);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);grid-column:span 6}.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6;height:calc((100vw - 10vw) * .5);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);min-height:calc((100vw - 10vw) * .5);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);max-height:calc((100rem - 10vw) * .5);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5)}.bx-grid__col--sm--7{max-width:calc((100rem - 10vw) * .5833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833);width:calc((100vw - 10vw) * .5833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);grid-column:span 7}.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7;height:calc((100vw - 10vw) * .5833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);min-height:calc((100vw - 10vw) * .5833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);max-height:calc((100rem - 10vw) * .5833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833)}.bx-grid__col--sm--8{max-width:calc((100rem - 10vw) * .6666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666);width:calc((100vw - 10vw) * .6666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);grid-column:span 8}.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8;height:calc((100vw - 10vw) * .6666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);min-height:calc((100vw - 10vw) * .6666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);max-height:calc((100rem - 10vw) * .6666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666)}.bx-grid__col--sm--9{max-width:calc((100rem - 10vw) * .75);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75);width:calc((100vw - 10vw) * .75);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);grid-column:span 9}.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9;height:calc((100vw - 10vw) * .75);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);min-height:calc((100vw - 10vw) * .75);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);max-height:calc((100rem - 10vw) * .75);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75)}.bx-grid__col--sm--10{max-width:calc((100rem - 10vw) * .8333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333);width:calc((100vw - 10vw) * .8333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);grid-column:span 10}.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10;height:calc((100vw - 10vw) * .8333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);min-height:calc((100vw - 10vw) * .8333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);max-height:calc((100rem - 10vw) * .8333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333)}.bx-grid__col--sm--11{max-width:calc((100rem - 10vw) * .9166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166);width:calc((100vw - 10vw) * .9166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);grid-column:span 11}.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11;height:calc((100vw - 10vw) * .9166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);min-height:calc((100vw - 10vw) * .9166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);max-height:calc((100rem - 10vw) * .9166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166)}.bx-grid__col--sm--12{max-width:calc((100rem - 10vw) * 1);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1);width:calc((100vw - 10vw) * 1);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);grid-column:span 12}.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12;height:calc((100vw - 10vw) * 1);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);min-height:calc((100vw - 10vw) * 1);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);max-height:calc((100rem - 10vw) * 1);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1)}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}[class*=bx-grid__col--]{min-width:0}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}}@supports (display:grid){.bx-grid>*,.bx-grid>[class*=bx-grid__col--]{min-width:initial;max-width:initial;width:initial}.bx-grid>.bx-grid,.bx-grid>[class*=bx-grid__col--].bx-grid{display:grid}.bx-grid>[class*=bx-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bx-grid>script{display:none} \ No newline at end of file +html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bx-grid{align-items:unset}.bx-grid>*{width:initial;height:100%}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1;height:.5rem;min-height:.5rem}.bx-grid__height--sm--2{grid-row:span 2;height:1rem;min-height:1rem}.bx-grid__height--sm--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.bx-grid__height--sm--4{grid-row:span 4;height:2rem;min-height:2rem}.bx-grid__height--sm--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.bx-grid__height--sm--6{grid-row:span 6;height:3rem;min-height:3rem}.bx-grid__height--sm--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.bx-grid__height--sm--8{grid-row:span 8;height:4rem;min-height:4rem}.bx-grid__height--sm--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.bx-grid__height--sm--10{grid-row:span 10;height:5rem;min-height:5rem}.bx-grid__height--sm--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.bx-grid__height--sm--12{grid-row:span 12;height:6rem;min-height:6rem}.bx-grid__height--sm--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.bx-grid__height--sm--14{grid-row:span 14;height:7rem;min-height:7rem}.bx-grid__height--sm--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.bx-grid__height--sm--16{grid-row:span 16;height:8rem;min-height:8rem}.bx-grid__height--sm--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.bx-grid__height--sm--18{grid-row:span 18;height:9rem;min-height:9rem}.bx-grid__height--sm--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.bx-grid__height--sm--20{grid-row:span 20;height:10rem;min-height:10rem}.bx-grid__height--sm--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.bx-grid__height--sm--22{grid-row:span 22;height:11rem;min-height:11rem}.bx-grid__height--sm--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.bx-grid__height--sm--24{grid-row:span 24;height:12rem;min-height:12rem}.bx-grid__height--sm--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.bx-grid__height--sm--26{grid-row:span 26;height:13rem;min-height:13rem}.bx-grid__height--sm--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.bx-grid__height--sm--28{grid-row:span 28;height:14rem;min-height:14rem}.bx-grid__height--sm--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1{max-width:calc((100rem - 10vw) * .0833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833);width:calc((100vw - 10vw) * .0833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);grid-column:span 1}.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid__offset--sm--1{margin-left:calc((100vw - 10vw) * .0833);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__offset--sm--1.bx-grid__col--sm--1{grid-column:2/span 1}.bx-grid__offset--sm--1.bx-grid__col--sm--2{grid-column:2/span 2}.bx-grid__offset--sm--1.bx-grid__col--sm--3{grid-column:2/span 3}.bx-grid__offset--sm--1.bx-grid__col--sm--4{grid-column:2/span 4}.bx-grid__offset--sm--1.bx-grid__col--sm--5{grid-column:2/span 5}.bx-grid__offset--sm--1.bx-grid__col--sm--6{grid-column:2/span 6}.bx-grid__offset--sm--1.bx-grid__col--sm--7{grid-column:2/span 7}.bx-grid__offset--sm--1.bx-grid__col--sm--8{grid-column:2/span 8}.bx-grid__offset--sm--1.bx-grid__col--sm--9{grid-column:2/span 9}.bx-grid__offset--sm--1.bx-grid__col--sm--10{grid-column:2/span 10}.bx-grid__offset--sm--1.bx-grid__col--sm--11{grid-column:2/span 11}.bx-grid__offset--sm--1.bx-grid__col--sm--12{grid-column:2/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1;height:calc((100vw - 10vw) * .0833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);min-height:calc((100vw - 10vw) * .0833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);max-height:calc((100rem - 10vw) * .0833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--2{max-width:calc((100rem - 10vw) * .1666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666);width:calc((100vw - 10vw) * .1666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);grid-column:span 2}.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid__offset--sm--2{margin-left:calc((100vw - 10vw) * .1666);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666)}.bx-grid__offset--sm--2.bx-grid__col--sm--1{grid-column:3/span 1}.bx-grid__offset--sm--2.bx-grid__col--sm--2{grid-column:3/span 2}.bx-grid__offset--sm--2.bx-grid__col--sm--3{grid-column:3/span 3}.bx-grid__offset--sm--2.bx-grid__col--sm--4{grid-column:3/span 4}.bx-grid__offset--sm--2.bx-grid__col--sm--5{grid-column:3/span 5}.bx-grid__offset--sm--2.bx-grid__col--sm--6{grid-column:3/span 6}.bx-grid__offset--sm--2.bx-grid__col--sm--7{grid-column:3/span 7}.bx-grid__offset--sm--2.bx-grid__col--sm--8{grid-column:3/span 8}.bx-grid__offset--sm--2.bx-grid__col--sm--9{grid-column:3/span 9}.bx-grid__offset--sm--2.bx-grid__col--sm--10{grid-column:3/span 10}.bx-grid__offset--sm--2.bx-grid__col--sm--11{grid-column:3/span 11}.bx-grid__offset--sm--2.bx-grid__col--sm--12{grid-column:3/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2;height:calc((100vw - 10vw) * .1666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);min-height:calc((100vw - 10vw) * .1666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);max-height:calc((100rem - 10vw) * .1666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666)}.bx-grid__col--sm--3{max-width:calc((100rem - 10vw) * .25);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25);width:calc((100vw - 10vw) * .25);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);grid-column:span 3}.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid__offset--sm--3{margin-left:calc((100vw - 10vw) * .25);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25)}.bx-grid__offset--sm--3.bx-grid__col--sm--1{grid-column:4/span 1}.bx-grid__offset--sm--3.bx-grid__col--sm--2{grid-column:4/span 2}.bx-grid__offset--sm--3.bx-grid__col--sm--3{grid-column:4/span 3}.bx-grid__offset--sm--3.bx-grid__col--sm--4{grid-column:4/span 4}.bx-grid__offset--sm--3.bx-grid__col--sm--5{grid-column:4/span 5}.bx-grid__offset--sm--3.bx-grid__col--sm--6{grid-column:4/span 6}.bx-grid__offset--sm--3.bx-grid__col--sm--7{grid-column:4/span 7}.bx-grid__offset--sm--3.bx-grid__col--sm--8{grid-column:4/span 8}.bx-grid__offset--sm--3.bx-grid__col--sm--9{grid-column:4/span 9}.bx-grid__offset--sm--3.bx-grid__col--sm--10{grid-column:4/span 10}.bx-grid__offset--sm--3.bx-grid__col--sm--11{grid-column:4/span 11}.bx-grid__offset--sm--3.bx-grid__col--sm--12{grid-column:4/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3;height:calc((100vw - 10vw) * .25);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);min-height:calc((100vw - 10vw) * .25);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);max-height:calc((100rem - 10vw) * .25);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25)}.bx-grid__col--sm--4{max-width:calc((100rem - 10vw) * .3333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333);width:calc((100vw - 10vw) * .3333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);grid-column:span 4}.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid__offset--sm--4{margin-left:calc((100vw - 10vw) * .3333);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333)}.bx-grid__offset--sm--4.bx-grid__col--sm--1{grid-column:5/span 1}.bx-grid__offset--sm--4.bx-grid__col--sm--2{grid-column:5/span 2}.bx-grid__offset--sm--4.bx-grid__col--sm--3{grid-column:5/span 3}.bx-grid__offset--sm--4.bx-grid__col--sm--4{grid-column:5/span 4}.bx-grid__offset--sm--4.bx-grid__col--sm--5{grid-column:5/span 5}.bx-grid__offset--sm--4.bx-grid__col--sm--6{grid-column:5/span 6}.bx-grid__offset--sm--4.bx-grid__col--sm--7{grid-column:5/span 7}.bx-grid__offset--sm--4.bx-grid__col--sm--8{grid-column:5/span 8}.bx-grid__offset--sm--4.bx-grid__col--sm--9{grid-column:5/span 9}.bx-grid__offset--sm--4.bx-grid__col--sm--10{grid-column:5/span 10}.bx-grid__offset--sm--4.bx-grid__col--sm--11{grid-column:5/span 11}.bx-grid__offset--sm--4.bx-grid__col--sm--12{grid-column:5/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4;height:calc((100vw - 10vw) * .3333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);min-height:calc((100vw - 10vw) * .3333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);max-height:calc((100rem - 10vw) * .3333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333)}.bx-grid__col--sm--5{max-width:calc((100rem - 10vw) * .4166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166);width:calc((100vw - 10vw) * .4166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);grid-column:span 5}.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid__offset--sm--5{margin-left:calc((100vw - 10vw) * .4166);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166)}.bx-grid__offset--sm--5.bx-grid__col--sm--1{grid-column:6/span 1}.bx-grid__offset--sm--5.bx-grid__col--sm--2{grid-column:6/span 2}.bx-grid__offset--sm--5.bx-grid__col--sm--3{grid-column:6/span 3}.bx-grid__offset--sm--5.bx-grid__col--sm--4{grid-column:6/span 4}.bx-grid__offset--sm--5.bx-grid__col--sm--5{grid-column:6/span 5}.bx-grid__offset--sm--5.bx-grid__col--sm--6{grid-column:6/span 6}.bx-grid__offset--sm--5.bx-grid__col--sm--7{grid-column:6/span 7}.bx-grid__offset--sm--5.bx-grid__col--sm--8{grid-column:6/span 8}.bx-grid__offset--sm--5.bx-grid__col--sm--9{grid-column:6/span 9}.bx-grid__offset--sm--5.bx-grid__col--sm--10{grid-column:6/span 10}.bx-grid__offset--sm--5.bx-grid__col--sm--11{grid-column:6/span 11}.bx-grid__offset--sm--5.bx-grid__col--sm--12{grid-column:6/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5;height:calc((100vw - 10vw) * .4166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);min-height:calc((100vw - 10vw) * .4166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);max-height:calc((100rem - 10vw) * .4166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166)}.bx-grid__col--sm--6{max-width:calc((100rem - 10vw) * .5);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5);width:calc((100vw - 10vw) * .5);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);grid-column:span 6}.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid__offset--sm--6{margin-left:calc((100vw - 10vw) * .5);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5)}.bx-grid__offset--sm--6.bx-grid__col--sm--1{grid-column:7/span 1}.bx-grid__offset--sm--6.bx-grid__col--sm--2{grid-column:7/span 2}.bx-grid__offset--sm--6.bx-grid__col--sm--3{grid-column:7/span 3}.bx-grid__offset--sm--6.bx-grid__col--sm--4{grid-column:7/span 4}.bx-grid__offset--sm--6.bx-grid__col--sm--5{grid-column:7/span 5}.bx-grid__offset--sm--6.bx-grid__col--sm--6{grid-column:7/span 6}.bx-grid__offset--sm--6.bx-grid__col--sm--7{grid-column:7/span 7}.bx-grid__offset--sm--6.bx-grid__col--sm--8{grid-column:7/span 8}.bx-grid__offset--sm--6.bx-grid__col--sm--9{grid-column:7/span 9}.bx-grid__offset--sm--6.bx-grid__col--sm--10{grid-column:7/span 10}.bx-grid__offset--sm--6.bx-grid__col--sm--11{grid-column:7/span 11}.bx-grid__offset--sm--6.bx-grid__col--sm--12{grid-column:7/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6;height:calc((100vw - 10vw) * .5);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);min-height:calc((100vw - 10vw) * .5);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);max-height:calc((100rem - 10vw) * .5);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5)}.bx-grid__col--sm--7{max-width:calc((100rem - 10vw) * .5833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833);width:calc((100vw - 10vw) * .5833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);grid-column:span 7}.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid__offset--sm--7{margin-left:calc((100vw - 10vw) * .5833);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833)}.bx-grid__offset--sm--7.bx-grid__col--sm--1{grid-column:8/span 1}.bx-grid__offset--sm--7.bx-grid__col--sm--2{grid-column:8/span 2}.bx-grid__offset--sm--7.bx-grid__col--sm--3{grid-column:8/span 3}.bx-grid__offset--sm--7.bx-grid__col--sm--4{grid-column:8/span 4}.bx-grid__offset--sm--7.bx-grid__col--sm--5{grid-column:8/span 5}.bx-grid__offset--sm--7.bx-grid__col--sm--6{grid-column:8/span 6}.bx-grid__offset--sm--7.bx-grid__col--sm--7{grid-column:8/span 7}.bx-grid__offset--sm--7.bx-grid__col--sm--8{grid-column:8/span 8}.bx-grid__offset--sm--7.bx-grid__col--sm--9{grid-column:8/span 9}.bx-grid__offset--sm--7.bx-grid__col--sm--10{grid-column:8/span 10}.bx-grid__offset--sm--7.bx-grid__col--sm--11{grid-column:8/span 11}.bx-grid__offset--sm--7.bx-grid__col--sm--12{grid-column:8/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7;height:calc((100vw - 10vw) * .5833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);min-height:calc((100vw - 10vw) * .5833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);max-height:calc((100rem - 10vw) * .5833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833)}.bx-grid__col--sm--8{max-width:calc((100rem - 10vw) * .6666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666);width:calc((100vw - 10vw) * .6666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);grid-column:span 8}.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid__offset--sm--8{margin-left:calc((100vw - 10vw) * .6666);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666)}.bx-grid__offset--sm--8.bx-grid__col--sm--1{grid-column:9/span 1}.bx-grid__offset--sm--8.bx-grid__col--sm--2{grid-column:9/span 2}.bx-grid__offset--sm--8.bx-grid__col--sm--3{grid-column:9/span 3}.bx-grid__offset--sm--8.bx-grid__col--sm--4{grid-column:9/span 4}.bx-grid__offset--sm--8.bx-grid__col--sm--5{grid-column:9/span 5}.bx-grid__offset--sm--8.bx-grid__col--sm--6{grid-column:9/span 6}.bx-grid__offset--sm--8.bx-grid__col--sm--7{grid-column:9/span 7}.bx-grid__offset--sm--8.bx-grid__col--sm--8{grid-column:9/span 8}.bx-grid__offset--sm--8.bx-grid__col--sm--9{grid-column:9/span 9}.bx-grid__offset--sm--8.bx-grid__col--sm--10{grid-column:9/span 10}.bx-grid__offset--sm--8.bx-grid__col--sm--11{grid-column:9/span 11}.bx-grid__offset--sm--8.bx-grid__col--sm--12{grid-column:9/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8;height:calc((100vw - 10vw) * .6666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);min-height:calc((100vw - 10vw) * .6666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);max-height:calc((100rem - 10vw) * .6666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666)}.bx-grid__col--sm--9{max-width:calc((100rem - 10vw) * .75);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75);width:calc((100vw - 10vw) * .75);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);grid-column:span 9}.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid__offset--sm--9{margin-left:calc((100vw - 10vw) * .75);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75)}.bx-grid__offset--sm--9.bx-grid__col--sm--1{grid-column:10/span 1}.bx-grid__offset--sm--9.bx-grid__col--sm--2{grid-column:10/span 2}.bx-grid__offset--sm--9.bx-grid__col--sm--3{grid-column:10/span 3}.bx-grid__offset--sm--9.bx-grid__col--sm--4{grid-column:10/span 4}.bx-grid__offset--sm--9.bx-grid__col--sm--5{grid-column:10/span 5}.bx-grid__offset--sm--9.bx-grid__col--sm--6{grid-column:10/span 6}.bx-grid__offset--sm--9.bx-grid__col--sm--7{grid-column:10/span 7}.bx-grid__offset--sm--9.bx-grid__col--sm--8{grid-column:10/span 8}.bx-grid__offset--sm--9.bx-grid__col--sm--9{grid-column:10/span 9}.bx-grid__offset--sm--9.bx-grid__col--sm--10{grid-column:10/span 10}.bx-grid__offset--sm--9.bx-grid__col--sm--11{grid-column:10/span 11}.bx-grid__offset--sm--9.bx-grid__col--sm--12{grid-column:10/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9;height:calc((100vw - 10vw) * .75);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);min-height:calc((100vw - 10vw) * .75);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);max-height:calc((100rem - 10vw) * .75);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75)}.bx-grid__col--sm--10{max-width:calc((100rem - 10vw) * .8333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333);width:calc((100vw - 10vw) * .8333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);grid-column:span 10}.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid__offset--sm--10{margin-left:calc((100vw - 10vw) * .8333);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333)}.bx-grid__offset--sm--10.bx-grid__col--sm--1{grid-column:11/span 1}.bx-grid__offset--sm--10.bx-grid__col--sm--2{grid-column:11/span 2}.bx-grid__offset--sm--10.bx-grid__col--sm--3{grid-column:11/span 3}.bx-grid__offset--sm--10.bx-grid__col--sm--4{grid-column:11/span 4}.bx-grid__offset--sm--10.bx-grid__col--sm--5{grid-column:11/span 5}.bx-grid__offset--sm--10.bx-grid__col--sm--6{grid-column:11/span 6}.bx-grid__offset--sm--10.bx-grid__col--sm--7{grid-column:11/span 7}.bx-grid__offset--sm--10.bx-grid__col--sm--8{grid-column:11/span 8}.bx-grid__offset--sm--10.bx-grid__col--sm--9{grid-column:11/span 9}.bx-grid__offset--sm--10.bx-grid__col--sm--10{grid-column:11/span 10}.bx-grid__offset--sm--10.bx-grid__col--sm--11{grid-column:11/span 11}.bx-grid__offset--sm--10.bx-grid__col--sm--12{grid-column:11/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10;height:calc((100vw - 10vw) * .8333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);min-height:calc((100vw - 10vw) * .8333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);max-height:calc((100rem - 10vw) * .8333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333)}.bx-grid__col--sm--11{max-width:calc((100rem - 10vw) * .9166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166);width:calc((100vw - 10vw) * .9166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);grid-column:span 11}.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid__offset--sm--11{margin-left:calc((100vw - 10vw) * .9166);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166)}.bx-grid__offset--sm--11.bx-grid__col--sm--1{grid-column:12/span 1}.bx-grid__offset--sm--11.bx-grid__col--sm--2{grid-column:12/span 2}.bx-grid__offset--sm--11.bx-grid__col--sm--3{grid-column:12/span 3}.bx-grid__offset--sm--11.bx-grid__col--sm--4{grid-column:12/span 4}.bx-grid__offset--sm--11.bx-grid__col--sm--5{grid-column:12/span 5}.bx-grid__offset--sm--11.bx-grid__col--sm--6{grid-column:12/span 6}.bx-grid__offset--sm--11.bx-grid__col--sm--7{grid-column:12/span 7}.bx-grid__offset--sm--11.bx-grid__col--sm--8{grid-column:12/span 8}.bx-grid__offset--sm--11.bx-grid__col--sm--9{grid-column:12/span 9}.bx-grid__offset--sm--11.bx-grid__col--sm--10{grid-column:12/span 10}.bx-grid__offset--sm--11.bx-grid__col--sm--11{grid-column:12/span 11}.bx-grid__offset--sm--11.bx-grid__col--sm--12{grid-column:12/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11;height:calc((100vw - 10vw) * .9166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);min-height:calc((100vw - 10vw) * .9166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);max-height:calc((100rem - 10vw) * .9166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166)}.bx-grid__col--sm--12{max-width:calc((100rem - 10vw) * 1);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1);width:calc((100vw - 10vw) * 1);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);grid-column:span 12}.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid__offset--sm--12{margin-left:calc((100vw - 10vw) * 1);margin-left:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1)}.bx-grid__offset--sm--12.bx-grid__col--sm--1{grid-column:13/span 1}.bx-grid__offset--sm--12.bx-grid__col--sm--2{grid-column:13/span 2}.bx-grid__offset--sm--12.bx-grid__col--sm--3{grid-column:13/span 3}.bx-grid__offset--sm--12.bx-grid__col--sm--4{grid-column:13/span 4}.bx-grid__offset--sm--12.bx-grid__col--sm--5{grid-column:13/span 5}.bx-grid__offset--sm--12.bx-grid__col--sm--6{grid-column:13/span 6}.bx-grid__offset--sm--12.bx-grid__col--sm--7{grid-column:13/span 7}.bx-grid__offset--sm--12.bx-grid__col--sm--8{grid-column:13/span 8}.bx-grid__offset--sm--12.bx-grid__col--sm--9{grid-column:13/span 9}.bx-grid__offset--sm--12.bx-grid__col--sm--10{grid-column:13/span 10}.bx-grid__offset--sm--12.bx-grid__col--sm--11{grid-column:13/span 11}.bx-grid__offset--sm--12.bx-grid__col--sm--12{grid-column:13/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12;height:calc((100vw - 10vw) * 1);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);min-height:calc((100vw - 10vw) * 1);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);max-height:calc((100rem - 10vw) * 1);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1)}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}[class*=bx-grid__col--]{min-width:0}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}}@supports (display:grid){.bx-grid>*,.bx-grid>[class*=bx-grid__col--]{min-width:initial;max-width:initial;width:initial;margin-left:initial}.bx-grid>.bx-grid,.bx-grid>[class*=bx-grid__col--].bx-grid{display:grid}.bx-grid>[class*=bx-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bx-grid>script{display:none} \ No newline at end of file diff --git a/examples/carbon/css-gridish/css/bx-grid.css b/examples/carbon/css-gridish/css/bx-grid.css index 36a7c4c..9b4b6f0 100755 --- a/examples/carbon/css-gridish/css/bx-grid.css +++ b/examples/carbon/css-gridish/css/bx-grid.css @@ -209,6 +209,42 @@ body { .bx-grid__col--sm--1.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 1; } +.bx-grid__offset--sm--1.bx-grid__col--sm--1 { + grid-column: 2 / span 1; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--2 { + grid-column: 2 / span 2; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--3 { + grid-column: 2 / span 3; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--4 { + grid-column: 2 / span 4; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--5 { + grid-column: 2 / span 5; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--6 { + grid-column: 2 / span 6; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--7 { + grid-column: 2 / span 7; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--8 { + grid-column: 2 / span 8; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--9 { + grid-column: 2 / span 9; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--10 { + grid-column: 2 / span 10; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--11 { + grid-column: 2 / span 11; } + +.bx-grid__offset--sm--1.bx-grid__col--sm--12 { + grid-column: 2 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--1 { grid-row: span 1; } @@ -218,6 +254,42 @@ body { .bx-grid__col--sm--2.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 2; } +.bx-grid__offset--sm--2.bx-grid__col--sm--1 { + grid-column: 3 / span 1; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--2 { + grid-column: 3 / span 2; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--3 { + grid-column: 3 / span 3; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--4 { + grid-column: 3 / span 4; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--5 { + grid-column: 3 / span 5; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--6 { + grid-column: 3 / span 6; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--7 { + grid-column: 3 / span 7; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--8 { + grid-column: 3 / span 8; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--9 { + grid-column: 3 / span 9; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--10 { + grid-column: 3 / span 10; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--11 { + grid-column: 3 / span 11; } + +.bx-grid__offset--sm--2.bx-grid__col--sm--12 { + grid-column: 3 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--2 { grid-row: span 2; } @@ -227,6 +299,42 @@ body { .bx-grid__col--sm--3.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 3; } +.bx-grid__offset--sm--3.bx-grid__col--sm--1 { + grid-column: 4 / span 1; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--2 { + grid-column: 4 / span 2; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--3 { + grid-column: 4 / span 3; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--4 { + grid-column: 4 / span 4; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--5 { + grid-column: 4 / span 5; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--6 { + grid-column: 4 / span 6; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--7 { + grid-column: 4 / span 7; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--8 { + grid-column: 4 / span 8; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--9 { + grid-column: 4 / span 9; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--10 { + grid-column: 4 / span 10; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--11 { + grid-column: 4 / span 11; } + +.bx-grid__offset--sm--3.bx-grid__col--sm--12 { + grid-column: 4 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--3 { grid-row: span 3; } @@ -236,6 +344,42 @@ body { .bx-grid__col--sm--4.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 4; } +.bx-grid__offset--sm--4.bx-grid__col--sm--1 { + grid-column: 5 / span 1; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--2 { + grid-column: 5 / span 2; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--3 { + grid-column: 5 / span 3; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--4 { + grid-column: 5 / span 4; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--5 { + grid-column: 5 / span 5; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--6 { + grid-column: 5 / span 6; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--7 { + grid-column: 5 / span 7; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--8 { + grid-column: 5 / span 8; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--9 { + grid-column: 5 / span 9; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--10 { + grid-column: 5 / span 10; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--11 { + grid-column: 5 / span 11; } + +.bx-grid__offset--sm--4.bx-grid__col--sm--12 { + grid-column: 5 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--4 { grid-row: span 4; } @@ -245,6 +389,42 @@ body { .bx-grid__col--sm--5.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 5; } +.bx-grid__offset--sm--5.bx-grid__col--sm--1 { + grid-column: 6 / span 1; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--2 { + grid-column: 6 / span 2; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--3 { + grid-column: 6 / span 3; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--4 { + grid-column: 6 / span 4; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--5 { + grid-column: 6 / span 5; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--6 { + grid-column: 6 / span 6; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--7 { + grid-column: 6 / span 7; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--8 { + grid-column: 6 / span 8; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--9 { + grid-column: 6 / span 9; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--10 { + grid-column: 6 / span 10; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--11 { + grid-column: 6 / span 11; } + +.bx-grid__offset--sm--5.bx-grid__col--sm--12 { + grid-column: 6 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--5 { grid-row: span 5; } @@ -254,6 +434,42 @@ body { .bx-grid__col--sm--6.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 6; } +.bx-grid__offset--sm--6.bx-grid__col--sm--1 { + grid-column: 7 / span 1; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--2 { + grid-column: 7 / span 2; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--3 { + grid-column: 7 / span 3; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--4 { + grid-column: 7 / span 4; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--5 { + grid-column: 7 / span 5; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--6 { + grid-column: 7 / span 6; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--7 { + grid-column: 7 / span 7; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--8 { + grid-column: 7 / span 8; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--9 { + grid-column: 7 / span 9; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--10 { + grid-column: 7 / span 10; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--11 { + grid-column: 7 / span 11; } + +.bx-grid__offset--sm--6.bx-grid__col--sm--12 { + grid-column: 7 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--6 { grid-row: span 6; } @@ -263,6 +479,42 @@ body { .bx-grid__col--sm--7.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 7; } +.bx-grid__offset--sm--7.bx-grid__col--sm--1 { + grid-column: 8 / span 1; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--2 { + grid-column: 8 / span 2; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--3 { + grid-column: 8 / span 3; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--4 { + grid-column: 8 / span 4; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--5 { + grid-column: 8 / span 5; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--6 { + grid-column: 8 / span 6; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--7 { + grid-column: 8 / span 7; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--8 { + grid-column: 8 / span 8; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--9 { + grid-column: 8 / span 9; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--10 { + grid-column: 8 / span 10; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--11 { + grid-column: 8 / span 11; } + +.bx-grid__offset--sm--7.bx-grid__col--sm--12 { + grid-column: 8 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--7 { grid-row: span 7; } @@ -272,6 +524,42 @@ body { .bx-grid__col--sm--8.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 8; } +.bx-grid__offset--sm--8.bx-grid__col--sm--1 { + grid-column: 9 / span 1; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--2 { + grid-column: 9 / span 2; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--3 { + grid-column: 9 / span 3; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--4 { + grid-column: 9 / span 4; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--5 { + grid-column: 9 / span 5; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--6 { + grid-column: 9 / span 6; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--7 { + grid-column: 9 / span 7; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--8 { + grid-column: 9 / span 8; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--9 { + grid-column: 9 / span 9; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--10 { + grid-column: 9 / span 10; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--11 { + grid-column: 9 / span 11; } + +.bx-grid__offset--sm--8.bx-grid__col--sm--12 { + grid-column: 9 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--8 { grid-row: span 8; } @@ -281,6 +569,42 @@ body { .bx-grid__col--sm--9.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 9; } +.bx-grid__offset--sm--9.bx-grid__col--sm--1 { + grid-column: 10 / span 1; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--2 { + grid-column: 10 / span 2; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--3 { + grid-column: 10 / span 3; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--4 { + grid-column: 10 / span 4; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--5 { + grid-column: 10 / span 5; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--6 { + grid-column: 10 / span 6; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--7 { + grid-column: 10 / span 7; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--8 { + grid-column: 10 / span 8; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--9 { + grid-column: 10 / span 9; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--10 { + grid-column: 10 / span 10; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--11 { + grid-column: 10 / span 11; } + +.bx-grid__offset--sm--9.bx-grid__col--sm--12 { + grid-column: 10 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--9 { grid-row: span 9; } @@ -290,6 +614,42 @@ body { .bx-grid__col--sm--10.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 10; } +.bx-grid__offset--sm--10.bx-grid__col--sm--1 { + grid-column: 11 / span 1; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--2 { + grid-column: 11 / span 2; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--3 { + grid-column: 11 / span 3; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--4 { + grid-column: 11 / span 4; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--5 { + grid-column: 11 / span 5; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--6 { + grid-column: 11 / span 6; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--7 { + grid-column: 11 / span 7; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--8 { + grid-column: 11 / span 8; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--9 { + grid-column: 11 / span 9; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--10 { + grid-column: 11 / span 10; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--11 { + grid-column: 11 / span 11; } + +.bx-grid__offset--sm--10.bx-grid__col--sm--12 { + grid-column: 11 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--10 { grid-row: span 10; } @@ -299,6 +659,42 @@ body { .bx-grid__col--sm--11.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 11; } +.bx-grid__offset--sm--11.bx-grid__col--sm--1 { + grid-column: 12 / span 1; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--2 { + grid-column: 12 / span 2; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--3 { + grid-column: 12 / span 3; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--4 { + grid-column: 12 / span 4; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--5 { + grid-column: 12 / span 5; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--6 { + grid-column: 12 / span 6; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--7 { + grid-column: 12 / span 7; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--8 { + grid-column: 12 / span 8; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--9 { + grid-column: 12 / span 9; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--10 { + grid-column: 12 / span 10; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--11 { + grid-column: 12 / span 11; } + +.bx-grid__offset--sm--11.bx-grid__col--sm--12 { + grid-column: 12 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--11 { grid-row: span 11; } @@ -308,6 +704,42 @@ body { .bx-grid__col--sm--12.bx-grid > *:not([class*="bx-grid__col"]) { grid-column: span 12; } +.bx-grid__offset--sm--12.bx-grid__col--sm--1 { + grid-column: 13 / span 1; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--2 { + grid-column: 13 / span 2; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--3 { + grid-column: 13 / span 3; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--4 { + grid-column: 13 / span 4; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--5 { + grid-column: 13 / span 5; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--6 { + grid-column: 13 / span 6; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--7 { + grid-column: 13 / span 7; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--8 { + grid-column: 13 / span 8; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--9 { + grid-column: 13 / span 9; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--10 { + grid-column: 13 / span 10; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--11 { + grid-column: 13 / span 11; } + +.bx-grid__offset--sm--12.bx-grid__col--sm--12 { + grid-column: 13 / span 12; } + .bx-grid--fluid-rows > .bx-grid__height--sm--12 { grid-row: span 12; } diff --git a/examples/carbon/css-gridish/css/bx-grid.min.css b/examples/carbon/css-gridish/css/bx-grid.min.css index 1dbce62..04db371 100755 --- a/examples/carbon/css-gridish/css/bx-grid.min.css +++ b/examples/carbon/css-gridish/css/bx-grid.min.css @@ -1 +1 @@ -html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--scrollbar-width:0px;--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__height--sm--12{grid-row:span 12}.bx-grid__height--sm--13{grid-row:span 13}.bx-grid__height--sm--14{grid-row:span 14}.bx-grid__height--sm--15{grid-row:span 15}.bx-grid__height--sm--16{grid-row:span 16}.bx-grid__height--sm--17{grid-row:span 17}.bx-grid__height--sm--18{grid-row:span 18}.bx-grid__height--sm--19{grid-row:span 19}.bx-grid__height--sm--20{grid-row:span 20}.bx-grid__height--sm--21{grid-row:span 21}.bx-grid__height--sm--22{grid-row:span 22}.bx-grid__height--sm--23{grid-row:span 23}.bx-grid__height--sm--24{grid-row:span 24}.bx-grid__height--sm--25{grid-row:span 25}.bx-grid__height--sm--26{grid-row:span 26}.bx-grid__height--sm--27{grid-row:span 27}.bx-grid__height--sm--28{grid-row:span 28}.bx-grid__height--sm--29{grid-row:span 29}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1,.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__col--sm--2,.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__col--sm--3,.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__col--sm--4,.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__col--sm--5,.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__col--sm--6,.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__col--sm--7,.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__col--sm--8,.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__col--sm--9,.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__col--sm--10,.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__col--sm--11,.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__col--sm--12,.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}} \ No newline at end of file +html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--scrollbar-width:0px;--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__height--sm--12{grid-row:span 12}.bx-grid__height--sm--13{grid-row:span 13}.bx-grid__height--sm--14{grid-row:span 14}.bx-grid__height--sm--15{grid-row:span 15}.bx-grid__height--sm--16{grid-row:span 16}.bx-grid__height--sm--17{grid-row:span 17}.bx-grid__height--sm--18{grid-row:span 18}.bx-grid__height--sm--19{grid-row:span 19}.bx-grid__height--sm--20{grid-row:span 20}.bx-grid__height--sm--21{grid-row:span 21}.bx-grid__height--sm--22{grid-row:span 22}.bx-grid__height--sm--23{grid-row:span 23}.bx-grid__height--sm--24{grid-row:span 24}.bx-grid__height--sm--25{grid-row:span 25}.bx-grid__height--sm--26{grid-row:span 26}.bx-grid__height--sm--27{grid-row:span 27}.bx-grid__height--sm--28{grid-row:span 28}.bx-grid__height--sm--29{grid-row:span 29}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1,.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid__offset--sm--1.bx-grid__col--sm--1{grid-column:2/span 1}.bx-grid__offset--sm--1.bx-grid__col--sm--2{grid-column:2/span 2}.bx-grid__offset--sm--1.bx-grid__col--sm--3{grid-column:2/span 3}.bx-grid__offset--sm--1.bx-grid__col--sm--4{grid-column:2/span 4}.bx-grid__offset--sm--1.bx-grid__col--sm--5{grid-column:2/span 5}.bx-grid__offset--sm--1.bx-grid__col--sm--6{grid-column:2/span 6}.bx-grid__offset--sm--1.bx-grid__col--sm--7{grid-column:2/span 7}.bx-grid__offset--sm--1.bx-grid__col--sm--8{grid-column:2/span 8}.bx-grid__offset--sm--1.bx-grid__col--sm--9{grid-column:2/span 9}.bx-grid__offset--sm--1.bx-grid__col--sm--10{grid-column:2/span 10}.bx-grid__offset--sm--1.bx-grid__col--sm--11{grid-column:2/span 11}.bx-grid__offset--sm--1.bx-grid__col--sm--12{grid-column:2/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__col--sm--2,.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid__offset--sm--2.bx-grid__col--sm--1{grid-column:3/span 1}.bx-grid__offset--sm--2.bx-grid__col--sm--2{grid-column:3/span 2}.bx-grid__offset--sm--2.bx-grid__col--sm--3{grid-column:3/span 3}.bx-grid__offset--sm--2.bx-grid__col--sm--4{grid-column:3/span 4}.bx-grid__offset--sm--2.bx-grid__col--sm--5{grid-column:3/span 5}.bx-grid__offset--sm--2.bx-grid__col--sm--6{grid-column:3/span 6}.bx-grid__offset--sm--2.bx-grid__col--sm--7{grid-column:3/span 7}.bx-grid__offset--sm--2.bx-grid__col--sm--8{grid-column:3/span 8}.bx-grid__offset--sm--2.bx-grid__col--sm--9{grid-column:3/span 9}.bx-grid__offset--sm--2.bx-grid__col--sm--10{grid-column:3/span 10}.bx-grid__offset--sm--2.bx-grid__col--sm--11{grid-column:3/span 11}.bx-grid__offset--sm--2.bx-grid__col--sm--12{grid-column:3/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__col--sm--3,.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid__offset--sm--3.bx-grid__col--sm--1{grid-column:4/span 1}.bx-grid__offset--sm--3.bx-grid__col--sm--2{grid-column:4/span 2}.bx-grid__offset--sm--3.bx-grid__col--sm--3{grid-column:4/span 3}.bx-grid__offset--sm--3.bx-grid__col--sm--4{grid-column:4/span 4}.bx-grid__offset--sm--3.bx-grid__col--sm--5{grid-column:4/span 5}.bx-grid__offset--sm--3.bx-grid__col--sm--6{grid-column:4/span 6}.bx-grid__offset--sm--3.bx-grid__col--sm--7{grid-column:4/span 7}.bx-grid__offset--sm--3.bx-grid__col--sm--8{grid-column:4/span 8}.bx-grid__offset--sm--3.bx-grid__col--sm--9{grid-column:4/span 9}.bx-grid__offset--sm--3.bx-grid__col--sm--10{grid-column:4/span 10}.bx-grid__offset--sm--3.bx-grid__col--sm--11{grid-column:4/span 11}.bx-grid__offset--sm--3.bx-grid__col--sm--12{grid-column:4/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__col--sm--4,.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid__offset--sm--4.bx-grid__col--sm--1{grid-column:5/span 1}.bx-grid__offset--sm--4.bx-grid__col--sm--2{grid-column:5/span 2}.bx-grid__offset--sm--4.bx-grid__col--sm--3{grid-column:5/span 3}.bx-grid__offset--sm--4.bx-grid__col--sm--4{grid-column:5/span 4}.bx-grid__offset--sm--4.bx-grid__col--sm--5{grid-column:5/span 5}.bx-grid__offset--sm--4.bx-grid__col--sm--6{grid-column:5/span 6}.bx-grid__offset--sm--4.bx-grid__col--sm--7{grid-column:5/span 7}.bx-grid__offset--sm--4.bx-grid__col--sm--8{grid-column:5/span 8}.bx-grid__offset--sm--4.bx-grid__col--sm--9{grid-column:5/span 9}.bx-grid__offset--sm--4.bx-grid__col--sm--10{grid-column:5/span 10}.bx-grid__offset--sm--4.bx-grid__col--sm--11{grid-column:5/span 11}.bx-grid__offset--sm--4.bx-grid__col--sm--12{grid-column:5/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__col--sm--5,.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid__offset--sm--5.bx-grid__col--sm--1{grid-column:6/span 1}.bx-grid__offset--sm--5.bx-grid__col--sm--2{grid-column:6/span 2}.bx-grid__offset--sm--5.bx-grid__col--sm--3{grid-column:6/span 3}.bx-grid__offset--sm--5.bx-grid__col--sm--4{grid-column:6/span 4}.bx-grid__offset--sm--5.bx-grid__col--sm--5{grid-column:6/span 5}.bx-grid__offset--sm--5.bx-grid__col--sm--6{grid-column:6/span 6}.bx-grid__offset--sm--5.bx-grid__col--sm--7{grid-column:6/span 7}.bx-grid__offset--sm--5.bx-grid__col--sm--8{grid-column:6/span 8}.bx-grid__offset--sm--5.bx-grid__col--sm--9{grid-column:6/span 9}.bx-grid__offset--sm--5.bx-grid__col--sm--10{grid-column:6/span 10}.bx-grid__offset--sm--5.bx-grid__col--sm--11{grid-column:6/span 11}.bx-grid__offset--sm--5.bx-grid__col--sm--12{grid-column:6/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__col--sm--6,.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid__offset--sm--6.bx-grid__col--sm--1{grid-column:7/span 1}.bx-grid__offset--sm--6.bx-grid__col--sm--2{grid-column:7/span 2}.bx-grid__offset--sm--6.bx-grid__col--sm--3{grid-column:7/span 3}.bx-grid__offset--sm--6.bx-grid__col--sm--4{grid-column:7/span 4}.bx-grid__offset--sm--6.bx-grid__col--sm--5{grid-column:7/span 5}.bx-grid__offset--sm--6.bx-grid__col--sm--6{grid-column:7/span 6}.bx-grid__offset--sm--6.bx-grid__col--sm--7{grid-column:7/span 7}.bx-grid__offset--sm--6.bx-grid__col--sm--8{grid-column:7/span 8}.bx-grid__offset--sm--6.bx-grid__col--sm--9{grid-column:7/span 9}.bx-grid__offset--sm--6.bx-grid__col--sm--10{grid-column:7/span 10}.bx-grid__offset--sm--6.bx-grid__col--sm--11{grid-column:7/span 11}.bx-grid__offset--sm--6.bx-grid__col--sm--12{grid-column:7/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__col--sm--7,.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid__offset--sm--7.bx-grid__col--sm--1{grid-column:8/span 1}.bx-grid__offset--sm--7.bx-grid__col--sm--2{grid-column:8/span 2}.bx-grid__offset--sm--7.bx-grid__col--sm--3{grid-column:8/span 3}.bx-grid__offset--sm--7.bx-grid__col--sm--4{grid-column:8/span 4}.bx-grid__offset--sm--7.bx-grid__col--sm--5{grid-column:8/span 5}.bx-grid__offset--sm--7.bx-grid__col--sm--6{grid-column:8/span 6}.bx-grid__offset--sm--7.bx-grid__col--sm--7{grid-column:8/span 7}.bx-grid__offset--sm--7.bx-grid__col--sm--8{grid-column:8/span 8}.bx-grid__offset--sm--7.bx-grid__col--sm--9{grid-column:8/span 9}.bx-grid__offset--sm--7.bx-grid__col--sm--10{grid-column:8/span 10}.bx-grid__offset--sm--7.bx-grid__col--sm--11{grid-column:8/span 11}.bx-grid__offset--sm--7.bx-grid__col--sm--12{grid-column:8/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__col--sm--8,.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid__offset--sm--8.bx-grid__col--sm--1{grid-column:9/span 1}.bx-grid__offset--sm--8.bx-grid__col--sm--2{grid-column:9/span 2}.bx-grid__offset--sm--8.bx-grid__col--sm--3{grid-column:9/span 3}.bx-grid__offset--sm--8.bx-grid__col--sm--4{grid-column:9/span 4}.bx-grid__offset--sm--8.bx-grid__col--sm--5{grid-column:9/span 5}.bx-grid__offset--sm--8.bx-grid__col--sm--6{grid-column:9/span 6}.bx-grid__offset--sm--8.bx-grid__col--sm--7{grid-column:9/span 7}.bx-grid__offset--sm--8.bx-grid__col--sm--8{grid-column:9/span 8}.bx-grid__offset--sm--8.bx-grid__col--sm--9{grid-column:9/span 9}.bx-grid__offset--sm--8.bx-grid__col--sm--10{grid-column:9/span 10}.bx-grid__offset--sm--8.bx-grid__col--sm--11{grid-column:9/span 11}.bx-grid__offset--sm--8.bx-grid__col--sm--12{grid-column:9/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__col--sm--9,.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid__offset--sm--9.bx-grid__col--sm--1{grid-column:10/span 1}.bx-grid__offset--sm--9.bx-grid__col--sm--2{grid-column:10/span 2}.bx-grid__offset--sm--9.bx-grid__col--sm--3{grid-column:10/span 3}.bx-grid__offset--sm--9.bx-grid__col--sm--4{grid-column:10/span 4}.bx-grid__offset--sm--9.bx-grid__col--sm--5{grid-column:10/span 5}.bx-grid__offset--sm--9.bx-grid__col--sm--6{grid-column:10/span 6}.bx-grid__offset--sm--9.bx-grid__col--sm--7{grid-column:10/span 7}.bx-grid__offset--sm--9.bx-grid__col--sm--8{grid-column:10/span 8}.bx-grid__offset--sm--9.bx-grid__col--sm--9{grid-column:10/span 9}.bx-grid__offset--sm--9.bx-grid__col--sm--10{grid-column:10/span 10}.bx-grid__offset--sm--9.bx-grid__col--sm--11{grid-column:10/span 11}.bx-grid__offset--sm--9.bx-grid__col--sm--12{grid-column:10/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__col--sm--10,.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid__offset--sm--10.bx-grid__col--sm--1{grid-column:11/span 1}.bx-grid__offset--sm--10.bx-grid__col--sm--2{grid-column:11/span 2}.bx-grid__offset--sm--10.bx-grid__col--sm--3{grid-column:11/span 3}.bx-grid__offset--sm--10.bx-grid__col--sm--4{grid-column:11/span 4}.bx-grid__offset--sm--10.bx-grid__col--sm--5{grid-column:11/span 5}.bx-grid__offset--sm--10.bx-grid__col--sm--6{grid-column:11/span 6}.bx-grid__offset--sm--10.bx-grid__col--sm--7{grid-column:11/span 7}.bx-grid__offset--sm--10.bx-grid__col--sm--8{grid-column:11/span 8}.bx-grid__offset--sm--10.bx-grid__col--sm--9{grid-column:11/span 9}.bx-grid__offset--sm--10.bx-grid__col--sm--10{grid-column:11/span 10}.bx-grid__offset--sm--10.bx-grid__col--sm--11{grid-column:11/span 11}.bx-grid__offset--sm--10.bx-grid__col--sm--12{grid-column:11/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__col--sm--11,.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid__offset--sm--11.bx-grid__col--sm--1{grid-column:12/span 1}.bx-grid__offset--sm--11.bx-grid__col--sm--2{grid-column:12/span 2}.bx-grid__offset--sm--11.bx-grid__col--sm--3{grid-column:12/span 3}.bx-grid__offset--sm--11.bx-grid__col--sm--4{grid-column:12/span 4}.bx-grid__offset--sm--11.bx-grid__col--sm--5{grid-column:12/span 5}.bx-grid__offset--sm--11.bx-grid__col--sm--6{grid-column:12/span 6}.bx-grid__offset--sm--11.bx-grid__col--sm--7{grid-column:12/span 7}.bx-grid__offset--sm--11.bx-grid__col--sm--8{grid-column:12/span 8}.bx-grid__offset--sm--11.bx-grid__col--sm--9{grid-column:12/span 9}.bx-grid__offset--sm--11.bx-grid__col--sm--10{grid-column:12/span 10}.bx-grid__offset--sm--11.bx-grid__col--sm--11{grid-column:12/span 11}.bx-grid__offset--sm--11.bx-grid__col--sm--12{grid-column:12/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__col--sm--12,.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid__offset--sm--12.bx-grid__col--sm--1{grid-column:13/span 1}.bx-grid__offset--sm--12.bx-grid__col--sm--2{grid-column:13/span 2}.bx-grid__offset--sm--12.bx-grid__col--sm--3{grid-column:13/span 3}.bx-grid__offset--sm--12.bx-grid__col--sm--4{grid-column:13/span 4}.bx-grid__offset--sm--12.bx-grid__col--sm--5{grid-column:13/span 5}.bx-grid__offset--sm--12.bx-grid__col--sm--6{grid-column:13/span 6}.bx-grid__offset--sm--12.bx-grid__col--sm--7{grid-column:13/span 7}.bx-grid__offset--sm--12.bx-grid__col--sm--8{grid-column:13/span 8}.bx-grid__offset--sm--12.bx-grid__col--sm--9{grid-column:13/span 9}.bx-grid__offset--sm--12.bx-grid__col--sm--10{grid-column:13/span 10}.bx-grid__offset--sm--12.bx-grid__col--sm--11{grid-column:13/span 11}.bx-grid__offset--sm--12.bx-grid__col--sm--12{grid-column:13/span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}} \ No newline at end of file diff --git a/examples/carbon/css-gridish/scss/_mixins.scss b/examples/carbon/css-gridish/scss/_mixins.scss index 0851a57..6ce95f6 100755 --- a/examples/carbon/css-gridish/scss/_mixins.scss +++ b/examples/carbon/css-gridish/scss/_mixins.scss @@ -95,6 +95,19 @@ } } + .#{$prefix}-grid__offset--#{$currentName}--#{$i} { + @if $includeFlexFallback { + margin-left: $columnSize; + margin-left: $columnSizeScrollbar; + } + + @for $j from 1 through map-get($currentBreakpoint, columns) { + &.#{$prefix}-grid__col--#{$currentName}--#{$j} { + grid-column: #{$i + 1} / span #{$j}; + } + } + } + .#{$prefix}-grid--fluid-rows > .#{$prefix}-grid__height--#{$currentName}--#{$i} { grid-row: span $i; diff --git a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss index 7f14ce0..dda5c29 100755 --- a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss +++ b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss @@ -7,6 +7,7 @@ $includeFlexFallback: true; min-width: initial; max-width: initial; width: initial; + margin-left: initial; &.#{$prefix}-grid { display: grid; diff --git a/examples/material/css-gridish/css/material-grid-legacy.css b/examples/material/css-gridish/css/material-grid-legacy.css index f4f8146..cdddf7a 100755 --- a/examples/material/css-gridish/css/material-grid-legacy.css +++ b/examples/material/css-gridish/css/material-grid-legacy.css @@ -281,6 +281,18 @@ body { .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } +.material-grid__offset--xsmall--1 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; @@ -296,6 +308,18 @@ body { .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } +.material-grid__offset--xsmall--2 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; @@ -311,6 +335,18 @@ body { .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } +.material-grid__offset--xsmall--3 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; @@ -326,6 +362,18 @@ body { .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } +.material-grid__offset--xsmall--4 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; @@ -493,6 +541,17 @@ body { grid-column: span 2; } .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--xsmall--1 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; @@ -506,6 +565,17 @@ body { grid-column: span 4; } .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--xsmall--2 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; @@ -519,6 +589,17 @@ body { grid-column: span 6; } .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--xsmall--3 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; @@ -532,6 +613,17 @@ body { grid-column: span 8; } .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--xsmall--4 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; @@ -545,6 +637,25 @@ body { grid-column: span 1; } .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--small--1 { + margin-left: 12.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.125); } + .material-grid__offset--small--1.material-grid__col--small--1 { + grid-column: 2 / span 1; } + .material-grid__offset--small--1.material-grid__col--small--2 { + grid-column: 2 / span 2; } + .material-grid__offset--small--1.material-grid__col--small--3 { + grid-column: 2 / span 3; } + .material-grid__offset--small--1.material-grid__col--small--4 { + grid-column: 2 / span 4; } + .material-grid__offset--small--1.material-grid__col--small--5 { + grid-column: 2 / span 5; } + .material-grid__offset--small--1.material-grid__col--small--6 { + grid-column: 2 / span 6; } + .material-grid__offset--small--1.material-grid__col--small--7 { + grid-column: 2 / span 7; } + .material-grid__offset--small--1.material-grid__col--small--8 { + grid-column: 2 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--1 { grid-row: span 1; @@ -558,6 +669,25 @@ body { grid-column: span 2; } .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--small--2 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--small--2.material-grid__col--small--1 { + grid-column: 3 / span 1; } + .material-grid__offset--small--2.material-grid__col--small--2 { + grid-column: 3 / span 2; } + .material-grid__offset--small--2.material-grid__col--small--3 { + grid-column: 3 / span 3; } + .material-grid__offset--small--2.material-grid__col--small--4 { + grid-column: 3 / span 4; } + .material-grid__offset--small--2.material-grid__col--small--5 { + grid-column: 3 / span 5; } + .material-grid__offset--small--2.material-grid__col--small--6 { + grid-column: 3 / span 6; } + .material-grid__offset--small--2.material-grid__col--small--7 { + grid-column: 3 / span 7; } + .material-grid__offset--small--2.material-grid__col--small--8 { + grid-column: 3 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--2 { grid-row: span 2; @@ -571,6 +701,25 @@ body { grid-column: span 3; } .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--small--3 { + margin-left: 37.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.375); } + .material-grid__offset--small--3.material-grid__col--small--1 { + grid-column: 4 / span 1; } + .material-grid__offset--small--3.material-grid__col--small--2 { + grid-column: 4 / span 2; } + .material-grid__offset--small--3.material-grid__col--small--3 { + grid-column: 4 / span 3; } + .material-grid__offset--small--3.material-grid__col--small--4 { + grid-column: 4 / span 4; } + .material-grid__offset--small--3.material-grid__col--small--5 { + grid-column: 4 / span 5; } + .material-grid__offset--small--3.material-grid__col--small--6 { + grid-column: 4 / span 6; } + .material-grid__offset--small--3.material-grid__col--small--7 { + grid-column: 4 / span 7; } + .material-grid__offset--small--3.material-grid__col--small--8 { + grid-column: 4 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--3 { grid-row: span 3; @@ -584,6 +733,25 @@ body { grid-column: span 4; } .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--small--4 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--small--4.material-grid__col--small--1 { + grid-column: 5 / span 1; } + .material-grid__offset--small--4.material-grid__col--small--2 { + grid-column: 5 / span 2; } + .material-grid__offset--small--4.material-grid__col--small--3 { + grid-column: 5 / span 3; } + .material-grid__offset--small--4.material-grid__col--small--4 { + grid-column: 5 / span 4; } + .material-grid__offset--small--4.material-grid__col--small--5 { + grid-column: 5 / span 5; } + .material-grid__offset--small--4.material-grid__col--small--6 { + grid-column: 5 / span 6; } + .material-grid__offset--small--4.material-grid__col--small--7 { + grid-column: 5 / span 7; } + .material-grid__offset--small--4.material-grid__col--small--8 { + grid-column: 5 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--4 { grid-row: span 4; @@ -597,6 +765,25 @@ body { grid-column: span 5; } .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--small--5 { + margin-left: 62.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.625); } + .material-grid__offset--small--5.material-grid__col--small--1 { + grid-column: 6 / span 1; } + .material-grid__offset--small--5.material-grid__col--small--2 { + grid-column: 6 / span 2; } + .material-grid__offset--small--5.material-grid__col--small--3 { + grid-column: 6 / span 3; } + .material-grid__offset--small--5.material-grid__col--small--4 { + grid-column: 6 / span 4; } + .material-grid__offset--small--5.material-grid__col--small--5 { + grid-column: 6 / span 5; } + .material-grid__offset--small--5.material-grid__col--small--6 { + grid-column: 6 / span 6; } + .material-grid__offset--small--5.material-grid__col--small--7 { + grid-column: 6 / span 7; } + .material-grid__offset--small--5.material-grid__col--small--8 { + grid-column: 6 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--5 { grid-row: span 5; @@ -610,6 +797,25 @@ body { grid-column: span 6; } .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--small--6 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--small--6.material-grid__col--small--1 { + grid-column: 7 / span 1; } + .material-grid__offset--small--6.material-grid__col--small--2 { + grid-column: 7 / span 2; } + .material-grid__offset--small--6.material-grid__col--small--3 { + grid-column: 7 / span 3; } + .material-grid__offset--small--6.material-grid__col--small--4 { + grid-column: 7 / span 4; } + .material-grid__offset--small--6.material-grid__col--small--5 { + grid-column: 7 / span 5; } + .material-grid__offset--small--6.material-grid__col--small--6 { + grid-column: 7 / span 6; } + .material-grid__offset--small--6.material-grid__col--small--7 { + grid-column: 7 / span 7; } + .material-grid__offset--small--6.material-grid__col--small--8 { + grid-column: 7 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--6 { grid-row: span 6; @@ -623,6 +829,25 @@ body { grid-column: span 7; } .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--small--7 { + margin-left: 87.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.875); } + .material-grid__offset--small--7.material-grid__col--small--1 { + grid-column: 8 / span 1; } + .material-grid__offset--small--7.material-grid__col--small--2 { + grid-column: 8 / span 2; } + .material-grid__offset--small--7.material-grid__col--small--3 { + grid-column: 8 / span 3; } + .material-grid__offset--small--7.material-grid__col--small--4 { + grid-column: 8 / span 4; } + .material-grid__offset--small--7.material-grid__col--small--5 { + grid-column: 8 / span 5; } + .material-grid__offset--small--7.material-grid__col--small--6 { + grid-column: 8 / span 6; } + .material-grid__offset--small--7.material-grid__col--small--7 { + grid-column: 8 / span 7; } + .material-grid__offset--small--7.material-grid__col--small--8 { + grid-column: 8 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--7 { grid-row: span 7; @@ -636,6 +861,25 @@ body { grid-column: span 8; } .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--small--8 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--small--8.material-grid__col--small--1 { + grid-column: 9 / span 1; } + .material-grid__offset--small--8.material-grid__col--small--2 { + grid-column: 9 / span 2; } + .material-grid__offset--small--8.material-grid__col--small--3 { + grid-column: 9 / span 3; } + .material-grid__offset--small--8.material-grid__col--small--4 { + grid-column: 9 / span 4; } + .material-grid__offset--small--8.material-grid__col--small--5 { + grid-column: 9 / span 5; } + .material-grid__offset--small--8.material-grid__col--small--6 { + grid-column: 9 / span 6; } + .material-grid__offset--small--8.material-grid__col--small--7 { + grid-column: 9 / span 7; } + .material-grid__offset--small--8.material-grid__col--small--8 { + grid-column: 9 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--8 { grid-row: span 8; @@ -807,6 +1051,17 @@ body { grid-column: span 3; } .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--xsmall--1 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; @@ -824,6 +1079,17 @@ body { grid-column: span 6; } .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--xsmall--2 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; @@ -841,6 +1107,17 @@ body { grid-column: span 9; } .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--xsmall--3 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; @@ -858,6 +1135,17 @@ body { grid-column: span 12; } .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--xsmall--4 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; @@ -875,6 +1163,25 @@ body { grid-column: span 1.5; } .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--small--1 { + margin-left: 12.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.125); } + .material-grid__offset--small--1.material-grid__col--small--1 { + grid-column: 2 / span 1; } + .material-grid__offset--small--1.material-grid__col--small--2 { + grid-column: 2 / span 2; } + .material-grid__offset--small--1.material-grid__col--small--3 { + grid-column: 2 / span 3; } + .material-grid__offset--small--1.material-grid__col--small--4 { + grid-column: 2 / span 4; } + .material-grid__offset--small--1.material-grid__col--small--5 { + grid-column: 2 / span 5; } + .material-grid__offset--small--1.material-grid__col--small--6 { + grid-column: 2 / span 6; } + .material-grid__offset--small--1.material-grid__col--small--7 { + grid-column: 2 / span 7; } + .material-grid__offset--small--1.material-grid__col--small--8 { + grid-column: 2 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--1 { grid-row: span 1; @@ -892,6 +1199,25 @@ body { grid-column: span 3; } .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--small--2 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--small--2.material-grid__col--small--1 { + grid-column: 3 / span 1; } + .material-grid__offset--small--2.material-grid__col--small--2 { + grid-column: 3 / span 2; } + .material-grid__offset--small--2.material-grid__col--small--3 { + grid-column: 3 / span 3; } + .material-grid__offset--small--2.material-grid__col--small--4 { + grid-column: 3 / span 4; } + .material-grid__offset--small--2.material-grid__col--small--5 { + grid-column: 3 / span 5; } + .material-grid__offset--small--2.material-grid__col--small--6 { + grid-column: 3 / span 6; } + .material-grid__offset--small--2.material-grid__col--small--7 { + grid-column: 3 / span 7; } + .material-grid__offset--small--2.material-grid__col--small--8 { + grid-column: 3 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--2 { grid-row: span 2; @@ -909,6 +1235,25 @@ body { grid-column: span 4.5; } .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--small--3 { + margin-left: 37.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.375); } + .material-grid__offset--small--3.material-grid__col--small--1 { + grid-column: 4 / span 1; } + .material-grid__offset--small--3.material-grid__col--small--2 { + grid-column: 4 / span 2; } + .material-grid__offset--small--3.material-grid__col--small--3 { + grid-column: 4 / span 3; } + .material-grid__offset--small--3.material-grid__col--small--4 { + grid-column: 4 / span 4; } + .material-grid__offset--small--3.material-grid__col--small--5 { + grid-column: 4 / span 5; } + .material-grid__offset--small--3.material-grid__col--small--6 { + grid-column: 4 / span 6; } + .material-grid__offset--small--3.material-grid__col--small--7 { + grid-column: 4 / span 7; } + .material-grid__offset--small--3.material-grid__col--small--8 { + grid-column: 4 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--3 { grid-row: span 3; @@ -926,6 +1271,25 @@ body { grid-column: span 6; } .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--small--4 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--small--4.material-grid__col--small--1 { + grid-column: 5 / span 1; } + .material-grid__offset--small--4.material-grid__col--small--2 { + grid-column: 5 / span 2; } + .material-grid__offset--small--4.material-grid__col--small--3 { + grid-column: 5 / span 3; } + .material-grid__offset--small--4.material-grid__col--small--4 { + grid-column: 5 / span 4; } + .material-grid__offset--small--4.material-grid__col--small--5 { + grid-column: 5 / span 5; } + .material-grid__offset--small--4.material-grid__col--small--6 { + grid-column: 5 / span 6; } + .material-grid__offset--small--4.material-grid__col--small--7 { + grid-column: 5 / span 7; } + .material-grid__offset--small--4.material-grid__col--small--8 { + grid-column: 5 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--4 { grid-row: span 4; @@ -943,6 +1307,25 @@ body { grid-column: span 7.5; } .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--small--5 { + margin-left: 62.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.625); } + .material-grid__offset--small--5.material-grid__col--small--1 { + grid-column: 6 / span 1; } + .material-grid__offset--small--5.material-grid__col--small--2 { + grid-column: 6 / span 2; } + .material-grid__offset--small--5.material-grid__col--small--3 { + grid-column: 6 / span 3; } + .material-grid__offset--small--5.material-grid__col--small--4 { + grid-column: 6 / span 4; } + .material-grid__offset--small--5.material-grid__col--small--5 { + grid-column: 6 / span 5; } + .material-grid__offset--small--5.material-grid__col--small--6 { + grid-column: 6 / span 6; } + .material-grid__offset--small--5.material-grid__col--small--7 { + grid-column: 6 / span 7; } + .material-grid__offset--small--5.material-grid__col--small--8 { + grid-column: 6 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--5 { grid-row: span 5; @@ -960,6 +1343,25 @@ body { grid-column: span 9; } .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--small--6 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--small--6.material-grid__col--small--1 { + grid-column: 7 / span 1; } + .material-grid__offset--small--6.material-grid__col--small--2 { + grid-column: 7 / span 2; } + .material-grid__offset--small--6.material-grid__col--small--3 { + grid-column: 7 / span 3; } + .material-grid__offset--small--6.material-grid__col--small--4 { + grid-column: 7 / span 4; } + .material-grid__offset--small--6.material-grid__col--small--5 { + grid-column: 7 / span 5; } + .material-grid__offset--small--6.material-grid__col--small--6 { + grid-column: 7 / span 6; } + .material-grid__offset--small--6.material-grid__col--small--7 { + grid-column: 7 / span 7; } + .material-grid__offset--small--6.material-grid__col--small--8 { + grid-column: 7 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--6 { grid-row: span 6; @@ -977,6 +1379,25 @@ body { grid-column: span 10.5; } .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--small--7 { + margin-left: 87.5vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.875); } + .material-grid__offset--small--7.material-grid__col--small--1 { + grid-column: 8 / span 1; } + .material-grid__offset--small--7.material-grid__col--small--2 { + grid-column: 8 / span 2; } + .material-grid__offset--small--7.material-grid__col--small--3 { + grid-column: 8 / span 3; } + .material-grid__offset--small--7.material-grid__col--small--4 { + grid-column: 8 / span 4; } + .material-grid__offset--small--7.material-grid__col--small--5 { + grid-column: 8 / span 5; } + .material-grid__offset--small--7.material-grid__col--small--6 { + grid-column: 8 / span 6; } + .material-grid__offset--small--7.material-grid__col--small--7 { + grid-column: 8 / span 7; } + .material-grid__offset--small--7.material-grid__col--small--8 { + grid-column: 8 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--7 { grid-row: span 7; @@ -994,6 +1415,25 @@ body { grid-column: span 12; } .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--small--8 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--small--8.material-grid__col--small--1 { + grid-column: 9 / span 1; } + .material-grid__offset--small--8.material-grid__col--small--2 { + grid-column: 9 / span 2; } + .material-grid__offset--small--8.material-grid__col--small--3 { + grid-column: 9 / span 3; } + .material-grid__offset--small--8.material-grid__col--small--4 { + grid-column: 9 / span 4; } + .material-grid__offset--small--8.material-grid__col--small--5 { + grid-column: 9 / span 5; } + .material-grid__offset--small--8.material-grid__col--small--6 { + grid-column: 9 / span 6; } + .material-grid__offset--small--8.material-grid__col--small--7 { + grid-column: 9 / span 7; } + .material-grid__offset--small--8.material-grid__col--small--8 { + grid-column: 9 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--8 { grid-row: span 8; @@ -1011,6 +1451,33 @@ body { grid-column: span 1; } .material-grid__col--medium--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--medium--1 { + margin-left: 8.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.0833); } + .material-grid__offset--medium--1.material-grid__col--medium--1 { + grid-column: 2 / span 1; } + .material-grid__offset--medium--1.material-grid__col--medium--2 { + grid-column: 2 / span 2; } + .material-grid__offset--medium--1.material-grid__col--medium--3 { + grid-column: 2 / span 3; } + .material-grid__offset--medium--1.material-grid__col--medium--4 { + grid-column: 2 / span 4; } + .material-grid__offset--medium--1.material-grid__col--medium--5 { + grid-column: 2 / span 5; } + .material-grid__offset--medium--1.material-grid__col--medium--6 { + grid-column: 2 / span 6; } + .material-grid__offset--medium--1.material-grid__col--medium--7 { + grid-column: 2 / span 7; } + .material-grid__offset--medium--1.material-grid__col--medium--8 { + grid-column: 2 / span 8; } + .material-grid__offset--medium--1.material-grid__col--medium--9 { + grid-column: 2 / span 9; } + .material-grid__offset--medium--1.material-grid__col--medium--10 { + grid-column: 2 / span 10; } + .material-grid__offset--medium--1.material-grid__col--medium--11 { + grid-column: 2 / span 11; } + .material-grid__offset--medium--1.material-grid__col--medium--12 { + grid-column: 2 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--1 { grid-row: span 1; @@ -1028,6 +1495,33 @@ body { grid-column: span 2; } .material-grid__col--medium--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--medium--2 { + margin-left: 16.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.1666); } + .material-grid__offset--medium--2.material-grid__col--medium--1 { + grid-column: 3 / span 1; } + .material-grid__offset--medium--2.material-grid__col--medium--2 { + grid-column: 3 / span 2; } + .material-grid__offset--medium--2.material-grid__col--medium--3 { + grid-column: 3 / span 3; } + .material-grid__offset--medium--2.material-grid__col--medium--4 { + grid-column: 3 / span 4; } + .material-grid__offset--medium--2.material-grid__col--medium--5 { + grid-column: 3 / span 5; } + .material-grid__offset--medium--2.material-grid__col--medium--6 { + grid-column: 3 / span 6; } + .material-grid__offset--medium--2.material-grid__col--medium--7 { + grid-column: 3 / span 7; } + .material-grid__offset--medium--2.material-grid__col--medium--8 { + grid-column: 3 / span 8; } + .material-grid__offset--medium--2.material-grid__col--medium--9 { + grid-column: 3 / span 9; } + .material-grid__offset--medium--2.material-grid__col--medium--10 { + grid-column: 3 / span 10; } + .material-grid__offset--medium--2.material-grid__col--medium--11 { + grid-column: 3 / span 11; } + .material-grid__offset--medium--2.material-grid__col--medium--12 { + grid-column: 3 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--2 { grid-row: span 2; @@ -1045,6 +1539,33 @@ body { grid-column: span 3; } .material-grid__col--medium--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--medium--3 { + margin-left: 25vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.25); } + .material-grid__offset--medium--3.material-grid__col--medium--1 { + grid-column: 4 / span 1; } + .material-grid__offset--medium--3.material-grid__col--medium--2 { + grid-column: 4 / span 2; } + .material-grid__offset--medium--3.material-grid__col--medium--3 { + grid-column: 4 / span 3; } + .material-grid__offset--medium--3.material-grid__col--medium--4 { + grid-column: 4 / span 4; } + .material-grid__offset--medium--3.material-grid__col--medium--5 { + grid-column: 4 / span 5; } + .material-grid__offset--medium--3.material-grid__col--medium--6 { + grid-column: 4 / span 6; } + .material-grid__offset--medium--3.material-grid__col--medium--7 { + grid-column: 4 / span 7; } + .material-grid__offset--medium--3.material-grid__col--medium--8 { + grid-column: 4 / span 8; } + .material-grid__offset--medium--3.material-grid__col--medium--9 { + grid-column: 4 / span 9; } + .material-grid__offset--medium--3.material-grid__col--medium--10 { + grid-column: 4 / span 10; } + .material-grid__offset--medium--3.material-grid__col--medium--11 { + grid-column: 4 / span 11; } + .material-grid__offset--medium--3.material-grid__col--medium--12 { + grid-column: 4 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--3 { grid-row: span 3; @@ -1062,6 +1583,33 @@ body { grid-column: span 4; } .material-grid__col--medium--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--medium--4 { + margin-left: 33.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.3333); } + .material-grid__offset--medium--4.material-grid__col--medium--1 { + grid-column: 5 / span 1; } + .material-grid__offset--medium--4.material-grid__col--medium--2 { + grid-column: 5 / span 2; } + .material-grid__offset--medium--4.material-grid__col--medium--3 { + grid-column: 5 / span 3; } + .material-grid__offset--medium--4.material-grid__col--medium--4 { + grid-column: 5 / span 4; } + .material-grid__offset--medium--4.material-grid__col--medium--5 { + grid-column: 5 / span 5; } + .material-grid__offset--medium--4.material-grid__col--medium--6 { + grid-column: 5 / span 6; } + .material-grid__offset--medium--4.material-grid__col--medium--7 { + grid-column: 5 / span 7; } + .material-grid__offset--medium--4.material-grid__col--medium--8 { + grid-column: 5 / span 8; } + .material-grid__offset--medium--4.material-grid__col--medium--9 { + grid-column: 5 / span 9; } + .material-grid__offset--medium--4.material-grid__col--medium--10 { + grid-column: 5 / span 10; } + .material-grid__offset--medium--4.material-grid__col--medium--11 { + grid-column: 5 / span 11; } + .material-grid__offset--medium--4.material-grid__col--medium--12 { + grid-column: 5 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--4 { grid-row: span 4; @@ -1079,6 +1627,33 @@ body { grid-column: span 5; } .material-grid__col--medium--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--medium--5 { + margin-left: 41.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.4166); } + .material-grid__offset--medium--5.material-grid__col--medium--1 { + grid-column: 6 / span 1; } + .material-grid__offset--medium--5.material-grid__col--medium--2 { + grid-column: 6 / span 2; } + .material-grid__offset--medium--5.material-grid__col--medium--3 { + grid-column: 6 / span 3; } + .material-grid__offset--medium--5.material-grid__col--medium--4 { + grid-column: 6 / span 4; } + .material-grid__offset--medium--5.material-grid__col--medium--5 { + grid-column: 6 / span 5; } + .material-grid__offset--medium--5.material-grid__col--medium--6 { + grid-column: 6 / span 6; } + .material-grid__offset--medium--5.material-grid__col--medium--7 { + grid-column: 6 / span 7; } + .material-grid__offset--medium--5.material-grid__col--medium--8 { + grid-column: 6 / span 8; } + .material-grid__offset--medium--5.material-grid__col--medium--9 { + grid-column: 6 / span 9; } + .material-grid__offset--medium--5.material-grid__col--medium--10 { + grid-column: 6 / span 10; } + .material-grid__offset--medium--5.material-grid__col--medium--11 { + grid-column: 6 / span 11; } + .material-grid__offset--medium--5.material-grid__col--medium--12 { + grid-column: 6 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--5 { grid-row: span 5; @@ -1096,6 +1671,33 @@ body { grid-column: span 6; } .material-grid__col--medium--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--medium--6 { + margin-left: 50vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5); } + .material-grid__offset--medium--6.material-grid__col--medium--1 { + grid-column: 7 / span 1; } + .material-grid__offset--medium--6.material-grid__col--medium--2 { + grid-column: 7 / span 2; } + .material-grid__offset--medium--6.material-grid__col--medium--3 { + grid-column: 7 / span 3; } + .material-grid__offset--medium--6.material-grid__col--medium--4 { + grid-column: 7 / span 4; } + .material-grid__offset--medium--6.material-grid__col--medium--5 { + grid-column: 7 / span 5; } + .material-grid__offset--medium--6.material-grid__col--medium--6 { + grid-column: 7 / span 6; } + .material-grid__offset--medium--6.material-grid__col--medium--7 { + grid-column: 7 / span 7; } + .material-grid__offset--medium--6.material-grid__col--medium--8 { + grid-column: 7 / span 8; } + .material-grid__offset--medium--6.material-grid__col--medium--9 { + grid-column: 7 / span 9; } + .material-grid__offset--medium--6.material-grid__col--medium--10 { + grid-column: 7 / span 10; } + .material-grid__offset--medium--6.material-grid__col--medium--11 { + grid-column: 7 / span 11; } + .material-grid__offset--medium--6.material-grid__col--medium--12 { + grid-column: 7 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--6 { grid-row: span 6; @@ -1113,6 +1715,33 @@ body { grid-column: span 7; } .material-grid__col--medium--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--medium--7 { + margin-left: 58.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.5833); } + .material-grid__offset--medium--7.material-grid__col--medium--1 { + grid-column: 8 / span 1; } + .material-grid__offset--medium--7.material-grid__col--medium--2 { + grid-column: 8 / span 2; } + .material-grid__offset--medium--7.material-grid__col--medium--3 { + grid-column: 8 / span 3; } + .material-grid__offset--medium--7.material-grid__col--medium--4 { + grid-column: 8 / span 4; } + .material-grid__offset--medium--7.material-grid__col--medium--5 { + grid-column: 8 / span 5; } + .material-grid__offset--medium--7.material-grid__col--medium--6 { + grid-column: 8 / span 6; } + .material-grid__offset--medium--7.material-grid__col--medium--7 { + grid-column: 8 / span 7; } + .material-grid__offset--medium--7.material-grid__col--medium--8 { + grid-column: 8 / span 8; } + .material-grid__offset--medium--7.material-grid__col--medium--9 { + grid-column: 8 / span 9; } + .material-grid__offset--medium--7.material-grid__col--medium--10 { + grid-column: 8 / span 10; } + .material-grid__offset--medium--7.material-grid__col--medium--11 { + grid-column: 8 / span 11; } + .material-grid__offset--medium--7.material-grid__col--medium--12 { + grid-column: 8 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--7 { grid-row: span 7; @@ -1130,6 +1759,33 @@ body { grid-column: span 8; } .material-grid__col--medium--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--medium--8 { + margin-left: 66.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.6666); } + .material-grid__offset--medium--8.material-grid__col--medium--1 { + grid-column: 9 / span 1; } + .material-grid__offset--medium--8.material-grid__col--medium--2 { + grid-column: 9 / span 2; } + .material-grid__offset--medium--8.material-grid__col--medium--3 { + grid-column: 9 / span 3; } + .material-grid__offset--medium--8.material-grid__col--medium--4 { + grid-column: 9 / span 4; } + .material-grid__offset--medium--8.material-grid__col--medium--5 { + grid-column: 9 / span 5; } + .material-grid__offset--medium--8.material-grid__col--medium--6 { + grid-column: 9 / span 6; } + .material-grid__offset--medium--8.material-grid__col--medium--7 { + grid-column: 9 / span 7; } + .material-grid__offset--medium--8.material-grid__col--medium--8 { + grid-column: 9 / span 8; } + .material-grid__offset--medium--8.material-grid__col--medium--9 { + grid-column: 9 / span 9; } + .material-grid__offset--medium--8.material-grid__col--medium--10 { + grid-column: 9 / span 10; } + .material-grid__offset--medium--8.material-grid__col--medium--11 { + grid-column: 9 / span 11; } + .material-grid__offset--medium--8.material-grid__col--medium--12 { + grid-column: 9 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--8 { grid-row: span 8; @@ -1147,6 +1803,33 @@ body { grid-column: span 9; } .material-grid__col--medium--9.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 9; } + .material-grid__offset--medium--9 { + margin-left: 75vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.75); } + .material-grid__offset--medium--9.material-grid__col--medium--1 { + grid-column: 10 / span 1; } + .material-grid__offset--medium--9.material-grid__col--medium--2 { + grid-column: 10 / span 2; } + .material-grid__offset--medium--9.material-grid__col--medium--3 { + grid-column: 10 / span 3; } + .material-grid__offset--medium--9.material-grid__col--medium--4 { + grid-column: 10 / span 4; } + .material-grid__offset--medium--9.material-grid__col--medium--5 { + grid-column: 10 / span 5; } + .material-grid__offset--medium--9.material-grid__col--medium--6 { + grid-column: 10 / span 6; } + .material-grid__offset--medium--9.material-grid__col--medium--7 { + grid-column: 10 / span 7; } + .material-grid__offset--medium--9.material-grid__col--medium--8 { + grid-column: 10 / span 8; } + .material-grid__offset--medium--9.material-grid__col--medium--9 { + grid-column: 10 / span 9; } + .material-grid__offset--medium--9.material-grid__col--medium--10 { + grid-column: 10 / span 10; } + .material-grid__offset--medium--9.material-grid__col--medium--11 { + grid-column: 10 / span 11; } + .material-grid__offset--medium--9.material-grid__col--medium--12 { + grid-column: 10 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--9 { grid-row: span 9; @@ -1164,6 +1847,33 @@ body { grid-column: span 10; } .material-grid__col--medium--10.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 10; } + .material-grid__offset--medium--10 { + margin-left: 83.33vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.8333); } + .material-grid__offset--medium--10.material-grid__col--medium--1 { + grid-column: 11 / span 1; } + .material-grid__offset--medium--10.material-grid__col--medium--2 { + grid-column: 11 / span 2; } + .material-grid__offset--medium--10.material-grid__col--medium--3 { + grid-column: 11 / span 3; } + .material-grid__offset--medium--10.material-grid__col--medium--4 { + grid-column: 11 / span 4; } + .material-grid__offset--medium--10.material-grid__col--medium--5 { + grid-column: 11 / span 5; } + .material-grid__offset--medium--10.material-grid__col--medium--6 { + grid-column: 11 / span 6; } + .material-grid__offset--medium--10.material-grid__col--medium--7 { + grid-column: 11 / span 7; } + .material-grid__offset--medium--10.material-grid__col--medium--8 { + grid-column: 11 / span 8; } + .material-grid__offset--medium--10.material-grid__col--medium--9 { + grid-column: 11 / span 9; } + .material-grid__offset--medium--10.material-grid__col--medium--10 { + grid-column: 11 / span 10; } + .material-grid__offset--medium--10.material-grid__col--medium--11 { + grid-column: 11 / span 11; } + .material-grid__offset--medium--10.material-grid__col--medium--12 { + grid-column: 11 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--10 { grid-row: span 10; @@ -1181,6 +1891,33 @@ body { grid-column: span 11; } .material-grid__col--medium--11.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 11; } + .material-grid__offset--medium--11 { + margin-left: 91.66vw; + margin-left: calc((100vw - var(--scrollbar-width))* 0.9166); } + .material-grid__offset--medium--11.material-grid__col--medium--1 { + grid-column: 12 / span 1; } + .material-grid__offset--medium--11.material-grid__col--medium--2 { + grid-column: 12 / span 2; } + .material-grid__offset--medium--11.material-grid__col--medium--3 { + grid-column: 12 / span 3; } + .material-grid__offset--medium--11.material-grid__col--medium--4 { + grid-column: 12 / span 4; } + .material-grid__offset--medium--11.material-grid__col--medium--5 { + grid-column: 12 / span 5; } + .material-grid__offset--medium--11.material-grid__col--medium--6 { + grid-column: 12 / span 6; } + .material-grid__offset--medium--11.material-grid__col--medium--7 { + grid-column: 12 / span 7; } + .material-grid__offset--medium--11.material-grid__col--medium--8 { + grid-column: 12 / span 8; } + .material-grid__offset--medium--11.material-grid__col--medium--9 { + grid-column: 12 / span 9; } + .material-grid__offset--medium--11.material-grid__col--medium--10 { + grid-column: 12 / span 10; } + .material-grid__offset--medium--11.material-grid__col--medium--11 { + grid-column: 12 / span 11; } + .material-grid__offset--medium--11.material-grid__col--medium--12 { + grid-column: 12 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--11 { grid-row: span 11; @@ -1198,6 +1935,33 @@ body { grid-column: span 12; } .material-grid__col--medium--12.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 12; } + .material-grid__offset--medium--12 { + margin-left: 100vw; + margin-left: calc((100vw - var(--scrollbar-width))* 1); } + .material-grid__offset--medium--12.material-grid__col--medium--1 { + grid-column: 13 / span 1; } + .material-grid__offset--medium--12.material-grid__col--medium--2 { + grid-column: 13 / span 2; } + .material-grid__offset--medium--12.material-grid__col--medium--3 { + grid-column: 13 / span 3; } + .material-grid__offset--medium--12.material-grid__col--medium--4 { + grid-column: 13 / span 4; } + .material-grid__offset--medium--12.material-grid__col--medium--5 { + grid-column: 13 / span 5; } + .material-grid__offset--medium--12.material-grid__col--medium--6 { + grid-column: 13 / span 6; } + .material-grid__offset--medium--12.material-grid__col--medium--7 { + grid-column: 13 / span 7; } + .material-grid__offset--medium--12.material-grid__col--medium--8 { + grid-column: 13 / span 8; } + .material-grid__offset--medium--12.material-grid__col--medium--9 { + grid-column: 13 / span 9; } + .material-grid__offset--medium--12.material-grid__col--medium--10 { + grid-column: 13 / span 10; } + .material-grid__offset--medium--12.material-grid__col--medium--11 { + grid-column: 13 / span 11; } + .material-grid__offset--medium--12.material-grid__col--medium--12 { + grid-column: 13 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--12 { grid-row: span 12; @@ -1252,7 +2016,8 @@ body { .material-grid > [class*="material-grid__col--"] { min-width: initial; max-width: initial; - width: initial; } + width: initial; + margin-left: initial; } .material-grid > *.material-grid, .material-grid > [class*="material-grid__col--"].material-grid { display: grid; } diff --git a/examples/material/css-gridish/css/material-grid-legacy.min.css b/examples/material/css-gridish/css/material-grid-legacy.min.css index f8eb576..7be1e5b 100755 --- a/examples/material/css-gridish/css/material-grid-legacy.min.css +++ b/examples/material/css-gridish/css/material-grid-legacy.min.css @@ -1 +1 @@ -html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;width:100%;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.material-grid{align-items:unset}.material-grid>*{width:initial;height:100%}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--xsmall--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--xsmall--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--xsmall--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--xsmall--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--xsmall--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--xsmall--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--xsmall--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--xsmall--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--xsmall--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--xsmall--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--xsmall--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--xsmall--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--xsmall--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--xsmall--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--xsmall--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--xsmall--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--xsmall--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--xsmall--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--xsmall--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--xsmall--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--xsmall--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--xsmall--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--xsmall--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--xsmall--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--xsmall--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--xsmall--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--xsmall--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--xsmall--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 1}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 2}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 3}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 4}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--small--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--small--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--small--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--small--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--small--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--small--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--small--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--small--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--small--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--small--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--small--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--small--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--small--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--small--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--small--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--small--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--small--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--small--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--small--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--small--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--small--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--small--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--small--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--small--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--small--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--small--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--small--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--small--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__col--small--1{width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125)}.material-grid__col--small--2{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--small--3{width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 3}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375)}.material-grid__col--small--4{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--small--5{width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625)}.material-grid__col--small--6{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--small--7{width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 7}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875)}.material-grid__col--small--8{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--medium--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--medium--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--medium--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--medium--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--medium--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--medium--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--medium--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--medium--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--medium--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--medium--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--medium--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--medium--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--medium--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--medium--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--medium--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--medium--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--medium--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--medium--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--medium--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--medium--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--medium--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--medium--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--medium--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--medium--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--medium--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--medium--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--medium--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--medium--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--small--1{max-width:15rem;max-width:calc((120rem - var(--scrollbar-width))* .125);width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125);max-height:15rem;max-height:calc((120rem - var(--scrollbar-width))* .125)}.material-grid__col--small--2{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--small--3{max-width:45rem;max-width:calc((120rem - var(--scrollbar-width))* .375);width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375);max-height:45rem;max-height:calc((120rem - var(--scrollbar-width))* .375)}.material-grid__col--small--4{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--small--5{max-width:75rem;max-width:calc((120rem - var(--scrollbar-width))* .625);width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625);max-height:75rem;max-height:calc((120rem - var(--scrollbar-width))* .625)}.material-grid__col--small--6{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--small--7{max-width:105rem;max-width:calc((120rem - var(--scrollbar-width))* .875);width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875);max-height:105rem;max-height:calc((120rem - var(--scrollbar-width))* .875)}.material-grid__col--small--8{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--medium--1{max-width:9.996rem;max-width:calc((120rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:9.996rem;max-height:calc((120rem - var(--scrollbar-width))* .0833)}.material-grid__col--medium--2{max-width:19.992rem;max-width:calc((120rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:19.992rem;max-height:calc((120rem - var(--scrollbar-width))* .1666)}.material-grid__col--medium--3{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--medium--4{max-width:39.996rem;max-width:calc((120rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:39.996rem;max-height:calc((120rem - var(--scrollbar-width))* .3333)}.material-grid__col--medium--5{max-width:49.992rem;max-width:calc((120rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:49.992rem;max-height:calc((120rem - var(--scrollbar-width))* .4166)}.material-grid__col--medium--6{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--medium--7{max-width:69.996rem;max-width:calc((120rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:69.996rem;max-height:calc((120rem - var(--scrollbar-width))* .5833)}.material-grid__col--medium--8{max-width:79.992rem;max-width:calc((120rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:79.992rem;max-height:calc((120rem - var(--scrollbar-width))* .6666)}.material-grid__col--medium--9{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--medium--10{max-width:99.996rem;max-width:calc((120rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:99.996rem;max-height:calc((120rem - var(--scrollbar-width))* .8333)}.material-grid__col--medium--11{max-width:109.992rem;max-width:calc((120rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:109.992rem;max-height:calc((120rem - var(--scrollbar-width))* .9166)}.material-grid__col--medium--12{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}[class*=material-grid__col--]{min-width:0}}@supports (display:grid){.material-grid>*,.material-grid>[class*=material-grid__col--]{min-width:initial;max-width:initial;width:initial}.material-grid>.material-grid,.material-grid>[class*=material-grid__col--].material-grid{display:grid}.material-grid>[class*=material-grid__height--]{height:unset;max-height:unset;min-height:initial}}.material-grid>script{display:none} \ No newline at end of file +html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;width:100%;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.material-grid{align-items:unset}.material-grid>*{width:initial;height:100%}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--xsmall--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--xsmall--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--xsmall--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--xsmall--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--xsmall--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--xsmall--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--xsmall--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--xsmall--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--xsmall--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--xsmall--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--xsmall--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--xsmall--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--xsmall--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--xsmall--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--xsmall--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--xsmall--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--xsmall--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--xsmall--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--xsmall--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--xsmall--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--xsmall--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--xsmall--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--xsmall--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--xsmall--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--xsmall--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--xsmall--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--xsmall--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--xsmall--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 1}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 2}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 3}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 4}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--small--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--small--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--small--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--small--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--small--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--small--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--small--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--small--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--small--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--small--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--small--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--small--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--small--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--small--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--small--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--small--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--small--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--small--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--small--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--small--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--small--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--small--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--small--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--small--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--small--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--small--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--small--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--small--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__col--small--1{width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--small--1{margin-left:12.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .125)}.material-grid__offset--small--1.material-grid__col--small--1{grid-column:2/span 1}.material-grid__offset--small--1.material-grid__col--small--2{grid-column:2/span 2}.material-grid__offset--small--1.material-grid__col--small--3{grid-column:2/span 3}.material-grid__offset--small--1.material-grid__col--small--4{grid-column:2/span 4}.material-grid__offset--small--1.material-grid__col--small--5{grid-column:2/span 5}.material-grid__offset--small--1.material-grid__col--small--6{grid-column:2/span 6}.material-grid__offset--small--1.material-grid__col--small--7{grid-column:2/span 7}.material-grid__offset--small--1.material-grid__col--small--8{grid-column:2/span 8}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125)}.material-grid__col--small--2{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--small--2{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--small--2.material-grid__col--small--1{grid-column:3/span 1}.material-grid__offset--small--2.material-grid__col--small--2{grid-column:3/span 2}.material-grid__offset--small--2.material-grid__col--small--3{grid-column:3/span 3}.material-grid__offset--small--2.material-grid__col--small--4{grid-column:3/span 4}.material-grid__offset--small--2.material-grid__col--small--5{grid-column:3/span 5}.material-grid__offset--small--2.material-grid__col--small--6{grid-column:3/span 6}.material-grid__offset--small--2.material-grid__col--small--7{grid-column:3/span 7}.material-grid__offset--small--2.material-grid__col--small--8{grid-column:3/span 8}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--small--3{width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 3}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--small--3{margin-left:37.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .375)}.material-grid__offset--small--3.material-grid__col--small--1{grid-column:4/span 1}.material-grid__offset--small--3.material-grid__col--small--2{grid-column:4/span 2}.material-grid__offset--small--3.material-grid__col--small--3{grid-column:4/span 3}.material-grid__offset--small--3.material-grid__col--small--4{grid-column:4/span 4}.material-grid__offset--small--3.material-grid__col--small--5{grid-column:4/span 5}.material-grid__offset--small--3.material-grid__col--small--6{grid-column:4/span 6}.material-grid__offset--small--3.material-grid__col--small--7{grid-column:4/span 7}.material-grid__offset--small--3.material-grid__col--small--8{grid-column:4/span 8}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375)}.material-grid__col--small--4{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--small--4{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--small--4.material-grid__col--small--1{grid-column:5/span 1}.material-grid__offset--small--4.material-grid__col--small--2{grid-column:5/span 2}.material-grid__offset--small--4.material-grid__col--small--3{grid-column:5/span 3}.material-grid__offset--small--4.material-grid__col--small--4{grid-column:5/span 4}.material-grid__offset--small--4.material-grid__col--small--5{grid-column:5/span 5}.material-grid__offset--small--4.material-grid__col--small--6{grid-column:5/span 6}.material-grid__offset--small--4.material-grid__col--small--7{grid-column:5/span 7}.material-grid__offset--small--4.material-grid__col--small--8{grid-column:5/span 8}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--small--5{width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--small--5{margin-left:62.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .625)}.material-grid__offset--small--5.material-grid__col--small--1{grid-column:6/span 1}.material-grid__offset--small--5.material-grid__col--small--2{grid-column:6/span 2}.material-grid__offset--small--5.material-grid__col--small--3{grid-column:6/span 3}.material-grid__offset--small--5.material-grid__col--small--4{grid-column:6/span 4}.material-grid__offset--small--5.material-grid__col--small--5{grid-column:6/span 5}.material-grid__offset--small--5.material-grid__col--small--6{grid-column:6/span 6}.material-grid__offset--small--5.material-grid__col--small--7{grid-column:6/span 7}.material-grid__offset--small--5.material-grid__col--small--8{grid-column:6/span 8}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625)}.material-grid__col--small--6{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--small--6{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--small--6.material-grid__col--small--1{grid-column:7/span 1}.material-grid__offset--small--6.material-grid__col--small--2{grid-column:7/span 2}.material-grid__offset--small--6.material-grid__col--small--3{grid-column:7/span 3}.material-grid__offset--small--6.material-grid__col--small--4{grid-column:7/span 4}.material-grid__offset--small--6.material-grid__col--small--5{grid-column:7/span 5}.material-grid__offset--small--6.material-grid__col--small--6{grid-column:7/span 6}.material-grid__offset--small--6.material-grid__col--small--7{grid-column:7/span 7}.material-grid__offset--small--6.material-grid__col--small--8{grid-column:7/span 8}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--small--7{width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 7}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--small--7{margin-left:87.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .875)}.material-grid__offset--small--7.material-grid__col--small--1{grid-column:8/span 1}.material-grid__offset--small--7.material-grid__col--small--2{grid-column:8/span 2}.material-grid__offset--small--7.material-grid__col--small--3{grid-column:8/span 3}.material-grid__offset--small--7.material-grid__col--small--4{grid-column:8/span 4}.material-grid__offset--small--7.material-grid__col--small--5{grid-column:8/span 5}.material-grid__offset--small--7.material-grid__col--small--6{grid-column:8/span 6}.material-grid__offset--small--7.material-grid__col--small--7{grid-column:8/span 7}.material-grid__offset--small--7.material-grid__col--small--8{grid-column:8/span 8}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875)}.material-grid__col--small--8{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--small--8{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--small--8.material-grid__col--small--1{grid-column:9/span 1}.material-grid__offset--small--8.material-grid__col--small--2{grid-column:9/span 2}.material-grid__offset--small--8.material-grid__col--small--3{grid-column:9/span 3}.material-grid__offset--small--8.material-grid__col--small--4{grid-column:9/span 4}.material-grid__offset--small--8.material-grid__col--small--5{grid-column:9/span 5}.material-grid__offset--small--8.material-grid__col--small--6{grid-column:9/span 6}.material-grid__offset--small--8.material-grid__col--small--7{grid-column:9/span 7}.material-grid__offset--small--8.material-grid__col--small--8{grid-column:9/span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--medium--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--medium--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--medium--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--medium--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--medium--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--medium--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--medium--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--medium--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--medium--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--medium--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--medium--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--medium--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--medium--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--medium--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--medium--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--medium--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--medium--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--medium--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--medium--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--medium--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--medium--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--medium--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--medium--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--medium--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--medium--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--medium--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--medium--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--medium--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--small--1{max-width:15rem;max-width:calc((120rem - var(--scrollbar-width))* .125);width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--small--1{margin-left:12.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .125)}.material-grid__offset--small--1.material-grid__col--small--1{grid-column:2/span 1}.material-grid__offset--small--1.material-grid__col--small--2{grid-column:2/span 2}.material-grid__offset--small--1.material-grid__col--small--3{grid-column:2/span 3}.material-grid__offset--small--1.material-grid__col--small--4{grid-column:2/span 4}.material-grid__offset--small--1.material-grid__col--small--5{grid-column:2/span 5}.material-grid__offset--small--1.material-grid__col--small--6{grid-column:2/span 6}.material-grid__offset--small--1.material-grid__col--small--7{grid-column:2/span 7}.material-grid__offset--small--1.material-grid__col--small--8{grid-column:2/span 8}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125);max-height:15rem;max-height:calc((120rem - var(--scrollbar-width))* .125)}.material-grid__col--small--2{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--small--2{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--small--2.material-grid__col--small--1{grid-column:3/span 1}.material-grid__offset--small--2.material-grid__col--small--2{grid-column:3/span 2}.material-grid__offset--small--2.material-grid__col--small--3{grid-column:3/span 3}.material-grid__offset--small--2.material-grid__col--small--4{grid-column:3/span 4}.material-grid__offset--small--2.material-grid__col--small--5{grid-column:3/span 5}.material-grid__offset--small--2.material-grid__col--small--6{grid-column:3/span 6}.material-grid__offset--small--2.material-grid__col--small--7{grid-column:3/span 7}.material-grid__offset--small--2.material-grid__col--small--8{grid-column:3/span 8}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--small--3{max-width:45rem;max-width:calc((120rem - var(--scrollbar-width))* .375);width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--small--3{margin-left:37.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .375)}.material-grid__offset--small--3.material-grid__col--small--1{grid-column:4/span 1}.material-grid__offset--small--3.material-grid__col--small--2{grid-column:4/span 2}.material-grid__offset--small--3.material-grid__col--small--3{grid-column:4/span 3}.material-grid__offset--small--3.material-grid__col--small--4{grid-column:4/span 4}.material-grid__offset--small--3.material-grid__col--small--5{grid-column:4/span 5}.material-grid__offset--small--3.material-grid__col--small--6{grid-column:4/span 6}.material-grid__offset--small--3.material-grid__col--small--7{grid-column:4/span 7}.material-grid__offset--small--3.material-grid__col--small--8{grid-column:4/span 8}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375);max-height:45rem;max-height:calc((120rem - var(--scrollbar-width))* .375)}.material-grid__col--small--4{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--small--4{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--small--4.material-grid__col--small--1{grid-column:5/span 1}.material-grid__offset--small--4.material-grid__col--small--2{grid-column:5/span 2}.material-grid__offset--small--4.material-grid__col--small--3{grid-column:5/span 3}.material-grid__offset--small--4.material-grid__col--small--4{grid-column:5/span 4}.material-grid__offset--small--4.material-grid__col--small--5{grid-column:5/span 5}.material-grid__offset--small--4.material-grid__col--small--6{grid-column:5/span 6}.material-grid__offset--small--4.material-grid__col--small--7{grid-column:5/span 7}.material-grid__offset--small--4.material-grid__col--small--8{grid-column:5/span 8}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--small--5{max-width:75rem;max-width:calc((120rem - var(--scrollbar-width))* .625);width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--small--5{margin-left:62.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .625)}.material-grid__offset--small--5.material-grid__col--small--1{grid-column:6/span 1}.material-grid__offset--small--5.material-grid__col--small--2{grid-column:6/span 2}.material-grid__offset--small--5.material-grid__col--small--3{grid-column:6/span 3}.material-grid__offset--small--5.material-grid__col--small--4{grid-column:6/span 4}.material-grid__offset--small--5.material-grid__col--small--5{grid-column:6/span 5}.material-grid__offset--small--5.material-grid__col--small--6{grid-column:6/span 6}.material-grid__offset--small--5.material-grid__col--small--7{grid-column:6/span 7}.material-grid__offset--small--5.material-grid__col--small--8{grid-column:6/span 8}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625);max-height:75rem;max-height:calc((120rem - var(--scrollbar-width))* .625)}.material-grid__col--small--6{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--small--6{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--small--6.material-grid__col--small--1{grid-column:7/span 1}.material-grid__offset--small--6.material-grid__col--small--2{grid-column:7/span 2}.material-grid__offset--small--6.material-grid__col--small--3{grid-column:7/span 3}.material-grid__offset--small--6.material-grid__col--small--4{grid-column:7/span 4}.material-grid__offset--small--6.material-grid__col--small--5{grid-column:7/span 5}.material-grid__offset--small--6.material-grid__col--small--6{grid-column:7/span 6}.material-grid__offset--small--6.material-grid__col--small--7{grid-column:7/span 7}.material-grid__offset--small--6.material-grid__col--small--8{grid-column:7/span 8}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--small--7{max-width:105rem;max-width:calc((120rem - var(--scrollbar-width))* .875);width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--small--7{margin-left:87.5vw;margin-left:calc((100vw - var(--scrollbar-width))* .875)}.material-grid__offset--small--7.material-grid__col--small--1{grid-column:8/span 1}.material-grid__offset--small--7.material-grid__col--small--2{grid-column:8/span 2}.material-grid__offset--small--7.material-grid__col--small--3{grid-column:8/span 3}.material-grid__offset--small--7.material-grid__col--small--4{grid-column:8/span 4}.material-grid__offset--small--7.material-grid__col--small--5{grid-column:8/span 5}.material-grid__offset--small--7.material-grid__col--small--6{grid-column:8/span 6}.material-grid__offset--small--7.material-grid__col--small--7{grid-column:8/span 7}.material-grid__offset--small--7.material-grid__col--small--8{grid-column:8/span 8}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875);max-height:105rem;max-height:calc((120rem - var(--scrollbar-width))* .875)}.material-grid__col--small--8{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--small--8{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--small--8.material-grid__col--small--1{grid-column:9/span 1}.material-grid__offset--small--8.material-grid__col--small--2{grid-column:9/span 2}.material-grid__offset--small--8.material-grid__col--small--3{grid-column:9/span 3}.material-grid__offset--small--8.material-grid__col--small--4{grid-column:9/span 4}.material-grid__offset--small--8.material-grid__col--small--5{grid-column:9/span 5}.material-grid__offset--small--8.material-grid__col--small--6{grid-column:9/span 6}.material-grid__offset--small--8.material-grid__col--small--7{grid-column:9/span 7}.material-grid__offset--small--8.material-grid__col--small--8{grid-column:9/span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--medium--1{max-width:9.996rem;max-width:calc((120rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--medium--1{margin-left:8.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid__offset--medium--1.material-grid__col--medium--1{grid-column:2/span 1}.material-grid__offset--medium--1.material-grid__col--medium--2{grid-column:2/span 2}.material-grid__offset--medium--1.material-grid__col--medium--3{grid-column:2/span 3}.material-grid__offset--medium--1.material-grid__col--medium--4{grid-column:2/span 4}.material-grid__offset--medium--1.material-grid__col--medium--5{grid-column:2/span 5}.material-grid__offset--medium--1.material-grid__col--medium--6{grid-column:2/span 6}.material-grid__offset--medium--1.material-grid__col--medium--7{grid-column:2/span 7}.material-grid__offset--medium--1.material-grid__col--medium--8{grid-column:2/span 8}.material-grid__offset--medium--1.material-grid__col--medium--9{grid-column:2/span 9}.material-grid__offset--medium--1.material-grid__col--medium--10{grid-column:2/span 10}.material-grid__offset--medium--1.material-grid__col--medium--11{grid-column:2/span 11}.material-grid__offset--medium--1.material-grid__col--medium--12{grid-column:2/span 12}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:9.996rem;max-height:calc((120rem - var(--scrollbar-width))* .0833)}.material-grid__col--medium--2{max-width:19.992rem;max-width:calc((120rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--medium--2{margin-left:16.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .1666)}.material-grid__offset--medium--2.material-grid__col--medium--1{grid-column:3/span 1}.material-grid__offset--medium--2.material-grid__col--medium--2{grid-column:3/span 2}.material-grid__offset--medium--2.material-grid__col--medium--3{grid-column:3/span 3}.material-grid__offset--medium--2.material-grid__col--medium--4{grid-column:3/span 4}.material-grid__offset--medium--2.material-grid__col--medium--5{grid-column:3/span 5}.material-grid__offset--medium--2.material-grid__col--medium--6{grid-column:3/span 6}.material-grid__offset--medium--2.material-grid__col--medium--7{grid-column:3/span 7}.material-grid__offset--medium--2.material-grid__col--medium--8{grid-column:3/span 8}.material-grid__offset--medium--2.material-grid__col--medium--9{grid-column:3/span 9}.material-grid__offset--medium--2.material-grid__col--medium--10{grid-column:3/span 10}.material-grid__offset--medium--2.material-grid__col--medium--11{grid-column:3/span 11}.material-grid__offset--medium--2.material-grid__col--medium--12{grid-column:3/span 12}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:19.992rem;max-height:calc((120rem - var(--scrollbar-width))* .1666)}.material-grid__col--medium--3{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--medium--3{margin-left:25vw;margin-left:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__offset--medium--3.material-grid__col--medium--1{grid-column:4/span 1}.material-grid__offset--medium--3.material-grid__col--medium--2{grid-column:4/span 2}.material-grid__offset--medium--3.material-grid__col--medium--3{grid-column:4/span 3}.material-grid__offset--medium--3.material-grid__col--medium--4{grid-column:4/span 4}.material-grid__offset--medium--3.material-grid__col--medium--5{grid-column:4/span 5}.material-grid__offset--medium--3.material-grid__col--medium--6{grid-column:4/span 6}.material-grid__offset--medium--3.material-grid__col--medium--7{grid-column:4/span 7}.material-grid__offset--medium--3.material-grid__col--medium--8{grid-column:4/span 8}.material-grid__offset--medium--3.material-grid__col--medium--9{grid-column:4/span 9}.material-grid__offset--medium--3.material-grid__col--medium--10{grid-column:4/span 10}.material-grid__offset--medium--3.material-grid__col--medium--11{grid-column:4/span 11}.material-grid__offset--medium--3.material-grid__col--medium--12{grid-column:4/span 12}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--medium--4{max-width:39.996rem;max-width:calc((120rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--medium--4{margin-left:33.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .3333)}.material-grid__offset--medium--4.material-grid__col--medium--1{grid-column:5/span 1}.material-grid__offset--medium--4.material-grid__col--medium--2{grid-column:5/span 2}.material-grid__offset--medium--4.material-grid__col--medium--3{grid-column:5/span 3}.material-grid__offset--medium--4.material-grid__col--medium--4{grid-column:5/span 4}.material-grid__offset--medium--4.material-grid__col--medium--5{grid-column:5/span 5}.material-grid__offset--medium--4.material-grid__col--medium--6{grid-column:5/span 6}.material-grid__offset--medium--4.material-grid__col--medium--7{grid-column:5/span 7}.material-grid__offset--medium--4.material-grid__col--medium--8{grid-column:5/span 8}.material-grid__offset--medium--4.material-grid__col--medium--9{grid-column:5/span 9}.material-grid__offset--medium--4.material-grid__col--medium--10{grid-column:5/span 10}.material-grid__offset--medium--4.material-grid__col--medium--11{grid-column:5/span 11}.material-grid__offset--medium--4.material-grid__col--medium--12{grid-column:5/span 12}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:39.996rem;max-height:calc((120rem - var(--scrollbar-width))* .3333)}.material-grid__col--medium--5{max-width:49.992rem;max-width:calc((120rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--medium--5{margin-left:41.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .4166)}.material-grid__offset--medium--5.material-grid__col--medium--1{grid-column:6/span 1}.material-grid__offset--medium--5.material-grid__col--medium--2{grid-column:6/span 2}.material-grid__offset--medium--5.material-grid__col--medium--3{grid-column:6/span 3}.material-grid__offset--medium--5.material-grid__col--medium--4{grid-column:6/span 4}.material-grid__offset--medium--5.material-grid__col--medium--5{grid-column:6/span 5}.material-grid__offset--medium--5.material-grid__col--medium--6{grid-column:6/span 6}.material-grid__offset--medium--5.material-grid__col--medium--7{grid-column:6/span 7}.material-grid__offset--medium--5.material-grid__col--medium--8{grid-column:6/span 8}.material-grid__offset--medium--5.material-grid__col--medium--9{grid-column:6/span 9}.material-grid__offset--medium--5.material-grid__col--medium--10{grid-column:6/span 10}.material-grid__offset--medium--5.material-grid__col--medium--11{grid-column:6/span 11}.material-grid__offset--medium--5.material-grid__col--medium--12{grid-column:6/span 12}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:49.992rem;max-height:calc((120rem - var(--scrollbar-width))* .4166)}.material-grid__col--medium--6{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--medium--6{margin-left:50vw;margin-left:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__offset--medium--6.material-grid__col--medium--1{grid-column:7/span 1}.material-grid__offset--medium--6.material-grid__col--medium--2{grid-column:7/span 2}.material-grid__offset--medium--6.material-grid__col--medium--3{grid-column:7/span 3}.material-grid__offset--medium--6.material-grid__col--medium--4{grid-column:7/span 4}.material-grid__offset--medium--6.material-grid__col--medium--5{grid-column:7/span 5}.material-grid__offset--medium--6.material-grid__col--medium--6{grid-column:7/span 6}.material-grid__offset--medium--6.material-grid__col--medium--7{grid-column:7/span 7}.material-grid__offset--medium--6.material-grid__col--medium--8{grid-column:7/span 8}.material-grid__offset--medium--6.material-grid__col--medium--9{grid-column:7/span 9}.material-grid__offset--medium--6.material-grid__col--medium--10{grid-column:7/span 10}.material-grid__offset--medium--6.material-grid__col--medium--11{grid-column:7/span 11}.material-grid__offset--medium--6.material-grid__col--medium--12{grid-column:7/span 12}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--medium--7{max-width:69.996rem;max-width:calc((120rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--medium--7{margin-left:58.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .5833)}.material-grid__offset--medium--7.material-grid__col--medium--1{grid-column:8/span 1}.material-grid__offset--medium--7.material-grid__col--medium--2{grid-column:8/span 2}.material-grid__offset--medium--7.material-grid__col--medium--3{grid-column:8/span 3}.material-grid__offset--medium--7.material-grid__col--medium--4{grid-column:8/span 4}.material-grid__offset--medium--7.material-grid__col--medium--5{grid-column:8/span 5}.material-grid__offset--medium--7.material-grid__col--medium--6{grid-column:8/span 6}.material-grid__offset--medium--7.material-grid__col--medium--7{grid-column:8/span 7}.material-grid__offset--medium--7.material-grid__col--medium--8{grid-column:8/span 8}.material-grid__offset--medium--7.material-grid__col--medium--9{grid-column:8/span 9}.material-grid__offset--medium--7.material-grid__col--medium--10{grid-column:8/span 10}.material-grid__offset--medium--7.material-grid__col--medium--11{grid-column:8/span 11}.material-grid__offset--medium--7.material-grid__col--medium--12{grid-column:8/span 12}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:69.996rem;max-height:calc((120rem - var(--scrollbar-width))* .5833)}.material-grid__col--medium--8{max-width:79.992rem;max-width:calc((120rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--medium--8{margin-left:66.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .6666)}.material-grid__offset--medium--8.material-grid__col--medium--1{grid-column:9/span 1}.material-grid__offset--medium--8.material-grid__col--medium--2{grid-column:9/span 2}.material-grid__offset--medium--8.material-grid__col--medium--3{grid-column:9/span 3}.material-grid__offset--medium--8.material-grid__col--medium--4{grid-column:9/span 4}.material-grid__offset--medium--8.material-grid__col--medium--5{grid-column:9/span 5}.material-grid__offset--medium--8.material-grid__col--medium--6{grid-column:9/span 6}.material-grid__offset--medium--8.material-grid__col--medium--7{grid-column:9/span 7}.material-grid__offset--medium--8.material-grid__col--medium--8{grid-column:9/span 8}.material-grid__offset--medium--8.material-grid__col--medium--9{grid-column:9/span 9}.material-grid__offset--medium--8.material-grid__col--medium--10{grid-column:9/span 10}.material-grid__offset--medium--8.material-grid__col--medium--11{grid-column:9/span 11}.material-grid__offset--medium--8.material-grid__col--medium--12{grid-column:9/span 12}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:79.992rem;max-height:calc((120rem - var(--scrollbar-width))* .6666)}.material-grid__col--medium--9{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid__offset--medium--9{margin-left:75vw;margin-left:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__offset--medium--9.material-grid__col--medium--1{grid-column:10/span 1}.material-grid__offset--medium--9.material-grid__col--medium--2{grid-column:10/span 2}.material-grid__offset--medium--9.material-grid__col--medium--3{grid-column:10/span 3}.material-grid__offset--medium--9.material-grid__col--medium--4{grid-column:10/span 4}.material-grid__offset--medium--9.material-grid__col--medium--5{grid-column:10/span 5}.material-grid__offset--medium--9.material-grid__col--medium--6{grid-column:10/span 6}.material-grid__offset--medium--9.material-grid__col--medium--7{grid-column:10/span 7}.material-grid__offset--medium--9.material-grid__col--medium--8{grid-column:10/span 8}.material-grid__offset--medium--9.material-grid__col--medium--9{grid-column:10/span 9}.material-grid__offset--medium--9.material-grid__col--medium--10{grid-column:10/span 10}.material-grid__offset--medium--9.material-grid__col--medium--11{grid-column:10/span 11}.material-grid__offset--medium--9.material-grid__col--medium--12{grid-column:10/span 12}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--medium--10{max-width:99.996rem;max-width:calc((120rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid__offset--medium--10{margin-left:83.33vw;margin-left:calc((100vw - var(--scrollbar-width))* .8333)}.material-grid__offset--medium--10.material-grid__col--medium--1{grid-column:11/span 1}.material-grid__offset--medium--10.material-grid__col--medium--2{grid-column:11/span 2}.material-grid__offset--medium--10.material-grid__col--medium--3{grid-column:11/span 3}.material-grid__offset--medium--10.material-grid__col--medium--4{grid-column:11/span 4}.material-grid__offset--medium--10.material-grid__col--medium--5{grid-column:11/span 5}.material-grid__offset--medium--10.material-grid__col--medium--6{grid-column:11/span 6}.material-grid__offset--medium--10.material-grid__col--medium--7{grid-column:11/span 7}.material-grid__offset--medium--10.material-grid__col--medium--8{grid-column:11/span 8}.material-grid__offset--medium--10.material-grid__col--medium--9{grid-column:11/span 9}.material-grid__offset--medium--10.material-grid__col--medium--10{grid-column:11/span 10}.material-grid__offset--medium--10.material-grid__col--medium--11{grid-column:11/span 11}.material-grid__offset--medium--10.material-grid__col--medium--12{grid-column:11/span 12}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:99.996rem;max-height:calc((120rem - var(--scrollbar-width))* .8333)}.material-grid__col--medium--11{max-width:109.992rem;max-width:calc((120rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid__offset--medium--11{margin-left:91.66vw;margin-left:calc((100vw - var(--scrollbar-width))* .9166)}.material-grid__offset--medium--11.material-grid__col--medium--1{grid-column:12/span 1}.material-grid__offset--medium--11.material-grid__col--medium--2{grid-column:12/span 2}.material-grid__offset--medium--11.material-grid__col--medium--3{grid-column:12/span 3}.material-grid__offset--medium--11.material-grid__col--medium--4{grid-column:12/span 4}.material-grid__offset--medium--11.material-grid__col--medium--5{grid-column:12/span 5}.material-grid__offset--medium--11.material-grid__col--medium--6{grid-column:12/span 6}.material-grid__offset--medium--11.material-grid__col--medium--7{grid-column:12/span 7}.material-grid__offset--medium--11.material-grid__col--medium--8{grid-column:12/span 8}.material-grid__offset--medium--11.material-grid__col--medium--9{grid-column:12/span 9}.material-grid__offset--medium--11.material-grid__col--medium--10{grid-column:12/span 10}.material-grid__offset--medium--11.material-grid__col--medium--11{grid-column:12/span 11}.material-grid__offset--medium--11.material-grid__col--medium--12{grid-column:12/span 12}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:109.992rem;max-height:calc((120rem - var(--scrollbar-width))* .9166)}.material-grid__col--medium--12{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid__offset--medium--12{margin-left:100vw;margin-left:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__offset--medium--12.material-grid__col--medium--1{grid-column:13/span 1}.material-grid__offset--medium--12.material-grid__col--medium--2{grid-column:13/span 2}.material-grid__offset--medium--12.material-grid__col--medium--3{grid-column:13/span 3}.material-grid__offset--medium--12.material-grid__col--medium--4{grid-column:13/span 4}.material-grid__offset--medium--12.material-grid__col--medium--5{grid-column:13/span 5}.material-grid__offset--medium--12.material-grid__col--medium--6{grid-column:13/span 6}.material-grid__offset--medium--12.material-grid__col--medium--7{grid-column:13/span 7}.material-grid__offset--medium--12.material-grid__col--medium--8{grid-column:13/span 8}.material-grid__offset--medium--12.material-grid__col--medium--9{grid-column:13/span 9}.material-grid__offset--medium--12.material-grid__col--medium--10{grid-column:13/span 10}.material-grid__offset--medium--12.material-grid__col--medium--11{grid-column:13/span 11}.material-grid__offset--medium--12.material-grid__col--medium--12{grid-column:13/span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}[class*=material-grid__col--]{min-width:0}}@supports (display:grid){.material-grid>*,.material-grid>[class*=material-grid__col--]{min-width:initial;max-width:initial;width:initial;margin-left:initial}.material-grid>.material-grid,.material-grid>[class*=material-grid__col--].material-grid{display:grid}.material-grid>[class*=material-grid__height--]{height:unset;max-height:unset;min-height:initial}}.material-grid>script{display:none} \ No newline at end of file diff --git a/examples/material/css-gridish/css/material-grid.css b/examples/material/css-gridish/css/material-grid.css index 9016e09..4c5fe82 100755 --- a/examples/material/css-gridish/css/material-grid.css +++ b/examples/material/css-gridish/css/material-grid.css @@ -209,6 +209,18 @@ body { .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } +.material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + +.material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + +.material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + +.material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; } @@ -218,6 +230,18 @@ body { .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } +.material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + +.material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + +.material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + +.material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; } @@ -227,6 +251,18 @@ body { .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } +.material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + +.material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + +.material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + +.material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; } @@ -236,6 +272,18 @@ body { .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } +.material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + +.material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + +.material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + +.material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } + .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; } @@ -339,6 +387,14 @@ body { grid-column: span 2; } .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; } @@ -346,6 +402,14 @@ body { grid-column: span 4; } .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; } @@ -353,6 +417,14 @@ body { grid-column: span 6; } .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; } @@ -360,6 +432,14 @@ body { grid-column: span 8; } .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; } @@ -367,6 +447,22 @@ body { grid-column: span 1; } .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--small--1.material-grid__col--small--1 { + grid-column: 2 / span 1; } + .material-grid__offset--small--1.material-grid__col--small--2 { + grid-column: 2 / span 2; } + .material-grid__offset--small--1.material-grid__col--small--3 { + grid-column: 2 / span 3; } + .material-grid__offset--small--1.material-grid__col--small--4 { + grid-column: 2 / span 4; } + .material-grid__offset--small--1.material-grid__col--small--5 { + grid-column: 2 / span 5; } + .material-grid__offset--small--1.material-grid__col--small--6 { + grid-column: 2 / span 6; } + .material-grid__offset--small--1.material-grid__col--small--7 { + grid-column: 2 / span 7; } + .material-grid__offset--small--1.material-grid__col--small--8 { + grid-column: 2 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--1 { grid-row: span 1; } @@ -374,6 +470,22 @@ body { grid-column: span 2; } .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--small--2.material-grid__col--small--1 { + grid-column: 3 / span 1; } + .material-grid__offset--small--2.material-grid__col--small--2 { + grid-column: 3 / span 2; } + .material-grid__offset--small--2.material-grid__col--small--3 { + grid-column: 3 / span 3; } + .material-grid__offset--small--2.material-grid__col--small--4 { + grid-column: 3 / span 4; } + .material-grid__offset--small--2.material-grid__col--small--5 { + grid-column: 3 / span 5; } + .material-grid__offset--small--2.material-grid__col--small--6 { + grid-column: 3 / span 6; } + .material-grid__offset--small--2.material-grid__col--small--7 { + grid-column: 3 / span 7; } + .material-grid__offset--small--2.material-grid__col--small--8 { + grid-column: 3 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--2 { grid-row: span 2; } @@ -381,6 +493,22 @@ body { grid-column: span 3; } .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--small--3.material-grid__col--small--1 { + grid-column: 4 / span 1; } + .material-grid__offset--small--3.material-grid__col--small--2 { + grid-column: 4 / span 2; } + .material-grid__offset--small--3.material-grid__col--small--3 { + grid-column: 4 / span 3; } + .material-grid__offset--small--3.material-grid__col--small--4 { + grid-column: 4 / span 4; } + .material-grid__offset--small--3.material-grid__col--small--5 { + grid-column: 4 / span 5; } + .material-grid__offset--small--3.material-grid__col--small--6 { + grid-column: 4 / span 6; } + .material-grid__offset--small--3.material-grid__col--small--7 { + grid-column: 4 / span 7; } + .material-grid__offset--small--3.material-grid__col--small--8 { + grid-column: 4 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--3 { grid-row: span 3; } @@ -388,6 +516,22 @@ body { grid-column: span 4; } .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--small--4.material-grid__col--small--1 { + grid-column: 5 / span 1; } + .material-grid__offset--small--4.material-grid__col--small--2 { + grid-column: 5 / span 2; } + .material-grid__offset--small--4.material-grid__col--small--3 { + grid-column: 5 / span 3; } + .material-grid__offset--small--4.material-grid__col--small--4 { + grid-column: 5 / span 4; } + .material-grid__offset--small--4.material-grid__col--small--5 { + grid-column: 5 / span 5; } + .material-grid__offset--small--4.material-grid__col--small--6 { + grid-column: 5 / span 6; } + .material-grid__offset--small--4.material-grid__col--small--7 { + grid-column: 5 / span 7; } + .material-grid__offset--small--4.material-grid__col--small--8 { + grid-column: 5 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--4 { grid-row: span 4; } @@ -395,6 +539,22 @@ body { grid-column: span 5; } .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--small--5.material-grid__col--small--1 { + grid-column: 6 / span 1; } + .material-grid__offset--small--5.material-grid__col--small--2 { + grid-column: 6 / span 2; } + .material-grid__offset--small--5.material-grid__col--small--3 { + grid-column: 6 / span 3; } + .material-grid__offset--small--5.material-grid__col--small--4 { + grid-column: 6 / span 4; } + .material-grid__offset--small--5.material-grid__col--small--5 { + grid-column: 6 / span 5; } + .material-grid__offset--small--5.material-grid__col--small--6 { + grid-column: 6 / span 6; } + .material-grid__offset--small--5.material-grid__col--small--7 { + grid-column: 6 / span 7; } + .material-grid__offset--small--5.material-grid__col--small--8 { + grid-column: 6 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--5 { grid-row: span 5; } @@ -402,6 +562,22 @@ body { grid-column: span 6; } .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--small--6.material-grid__col--small--1 { + grid-column: 7 / span 1; } + .material-grid__offset--small--6.material-grid__col--small--2 { + grid-column: 7 / span 2; } + .material-grid__offset--small--6.material-grid__col--small--3 { + grid-column: 7 / span 3; } + .material-grid__offset--small--6.material-grid__col--small--4 { + grid-column: 7 / span 4; } + .material-grid__offset--small--6.material-grid__col--small--5 { + grid-column: 7 / span 5; } + .material-grid__offset--small--6.material-grid__col--small--6 { + grid-column: 7 / span 6; } + .material-grid__offset--small--6.material-grid__col--small--7 { + grid-column: 7 / span 7; } + .material-grid__offset--small--6.material-grid__col--small--8 { + grid-column: 7 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--6 { grid-row: span 6; } @@ -409,6 +585,22 @@ body { grid-column: span 7; } .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--small--7.material-grid__col--small--1 { + grid-column: 8 / span 1; } + .material-grid__offset--small--7.material-grid__col--small--2 { + grid-column: 8 / span 2; } + .material-grid__offset--small--7.material-grid__col--small--3 { + grid-column: 8 / span 3; } + .material-grid__offset--small--7.material-grid__col--small--4 { + grid-column: 8 / span 4; } + .material-grid__offset--small--7.material-grid__col--small--5 { + grid-column: 8 / span 5; } + .material-grid__offset--small--7.material-grid__col--small--6 { + grid-column: 8 / span 6; } + .material-grid__offset--small--7.material-grid__col--small--7 { + grid-column: 8 / span 7; } + .material-grid__offset--small--7.material-grid__col--small--8 { + grid-column: 8 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--7 { grid-row: span 7; } @@ -416,6 +608,22 @@ body { grid-column: span 8; } .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--small--8.material-grid__col--small--1 { + grid-column: 9 / span 1; } + .material-grid__offset--small--8.material-grid__col--small--2 { + grid-column: 9 / span 2; } + .material-grid__offset--small--8.material-grid__col--small--3 { + grid-column: 9 / span 3; } + .material-grid__offset--small--8.material-grid__col--small--4 { + grid-column: 9 / span 4; } + .material-grid__offset--small--8.material-grid__col--small--5 { + grid-column: 9 / span 5; } + .material-grid__offset--small--8.material-grid__col--small--6 { + grid-column: 9 / span 6; } + .material-grid__offset--small--8.material-grid__col--small--7 { + grid-column: 9 / span 7; } + .material-grid__offset--small--8.material-grid__col--small--8 { + grid-column: 9 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--8 { grid-row: span 8; } } @@ -521,6 +729,14 @@ body { grid-column: span 3; } .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--1 { + grid-column: 2 / span 1; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--2 { + grid-column: 2 / span 2; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--3 { + grid-column: 2 / span 3; } + .material-grid__offset--xsmall--1.material-grid__col--xsmall--4 { + grid-column: 2 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--1 { grid-row: span 1; } @@ -528,6 +744,14 @@ body { grid-column: span 6; } .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--1 { + grid-column: 3 / span 1; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--2 { + grid-column: 3 / span 2; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--3 { + grid-column: 3 / span 3; } + .material-grid__offset--xsmall--2.material-grid__col--xsmall--4 { + grid-column: 3 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--2 { grid-row: span 2; } @@ -535,6 +759,14 @@ body { grid-column: span 9; } .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--1 { + grid-column: 4 / span 1; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--2 { + grid-column: 4 / span 2; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--3 { + grid-column: 4 / span 3; } + .material-grid__offset--xsmall--3.material-grid__col--xsmall--4 { + grid-column: 4 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--3 { grid-row: span 3; } @@ -542,6 +774,14 @@ body { grid-column: span 12; } .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--1 { + grid-column: 5 / span 1; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--2 { + grid-column: 5 / span 2; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--3 { + grid-column: 5 / span 3; } + .material-grid__offset--xsmall--4.material-grid__col--xsmall--4 { + grid-column: 5 / span 4; } .material-grid--fluid-rows > .material-grid__height--xsmall--4 { grid-row: span 4; } @@ -549,6 +789,22 @@ body { grid-column: span 1.5; } .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--small--1.material-grid__col--small--1 { + grid-column: 2 / span 1; } + .material-grid__offset--small--1.material-grid__col--small--2 { + grid-column: 2 / span 2; } + .material-grid__offset--small--1.material-grid__col--small--3 { + grid-column: 2 / span 3; } + .material-grid__offset--small--1.material-grid__col--small--4 { + grid-column: 2 / span 4; } + .material-grid__offset--small--1.material-grid__col--small--5 { + grid-column: 2 / span 5; } + .material-grid__offset--small--1.material-grid__col--small--6 { + grid-column: 2 / span 6; } + .material-grid__offset--small--1.material-grid__col--small--7 { + grid-column: 2 / span 7; } + .material-grid__offset--small--1.material-grid__col--small--8 { + grid-column: 2 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--1 { grid-row: span 1; } @@ -556,6 +812,22 @@ body { grid-column: span 3; } .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--small--2.material-grid__col--small--1 { + grid-column: 3 / span 1; } + .material-grid__offset--small--2.material-grid__col--small--2 { + grid-column: 3 / span 2; } + .material-grid__offset--small--2.material-grid__col--small--3 { + grid-column: 3 / span 3; } + .material-grid__offset--small--2.material-grid__col--small--4 { + grid-column: 3 / span 4; } + .material-grid__offset--small--2.material-grid__col--small--5 { + grid-column: 3 / span 5; } + .material-grid__offset--small--2.material-grid__col--small--6 { + grid-column: 3 / span 6; } + .material-grid__offset--small--2.material-grid__col--small--7 { + grid-column: 3 / span 7; } + .material-grid__offset--small--2.material-grid__col--small--8 { + grid-column: 3 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--2 { grid-row: span 2; } @@ -563,6 +835,22 @@ body { grid-column: span 4.5; } .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--small--3.material-grid__col--small--1 { + grid-column: 4 / span 1; } + .material-grid__offset--small--3.material-grid__col--small--2 { + grid-column: 4 / span 2; } + .material-grid__offset--small--3.material-grid__col--small--3 { + grid-column: 4 / span 3; } + .material-grid__offset--small--3.material-grid__col--small--4 { + grid-column: 4 / span 4; } + .material-grid__offset--small--3.material-grid__col--small--5 { + grid-column: 4 / span 5; } + .material-grid__offset--small--3.material-grid__col--small--6 { + grid-column: 4 / span 6; } + .material-grid__offset--small--3.material-grid__col--small--7 { + grid-column: 4 / span 7; } + .material-grid__offset--small--3.material-grid__col--small--8 { + grid-column: 4 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--3 { grid-row: span 3; } @@ -570,6 +858,22 @@ body { grid-column: span 6; } .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--small--4.material-grid__col--small--1 { + grid-column: 5 / span 1; } + .material-grid__offset--small--4.material-grid__col--small--2 { + grid-column: 5 / span 2; } + .material-grid__offset--small--4.material-grid__col--small--3 { + grid-column: 5 / span 3; } + .material-grid__offset--small--4.material-grid__col--small--4 { + grid-column: 5 / span 4; } + .material-grid__offset--small--4.material-grid__col--small--5 { + grid-column: 5 / span 5; } + .material-grid__offset--small--4.material-grid__col--small--6 { + grid-column: 5 / span 6; } + .material-grid__offset--small--4.material-grid__col--small--7 { + grid-column: 5 / span 7; } + .material-grid__offset--small--4.material-grid__col--small--8 { + grid-column: 5 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--4 { grid-row: span 4; } @@ -577,6 +881,22 @@ body { grid-column: span 7.5; } .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--small--5.material-grid__col--small--1 { + grid-column: 6 / span 1; } + .material-grid__offset--small--5.material-grid__col--small--2 { + grid-column: 6 / span 2; } + .material-grid__offset--small--5.material-grid__col--small--3 { + grid-column: 6 / span 3; } + .material-grid__offset--small--5.material-grid__col--small--4 { + grid-column: 6 / span 4; } + .material-grid__offset--small--5.material-grid__col--small--5 { + grid-column: 6 / span 5; } + .material-grid__offset--small--5.material-grid__col--small--6 { + grid-column: 6 / span 6; } + .material-grid__offset--small--5.material-grid__col--small--7 { + grid-column: 6 / span 7; } + .material-grid__offset--small--5.material-grid__col--small--8 { + grid-column: 6 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--5 { grid-row: span 5; } @@ -584,6 +904,22 @@ body { grid-column: span 9; } .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--small--6.material-grid__col--small--1 { + grid-column: 7 / span 1; } + .material-grid__offset--small--6.material-grid__col--small--2 { + grid-column: 7 / span 2; } + .material-grid__offset--small--6.material-grid__col--small--3 { + grid-column: 7 / span 3; } + .material-grid__offset--small--6.material-grid__col--small--4 { + grid-column: 7 / span 4; } + .material-grid__offset--small--6.material-grid__col--small--5 { + grid-column: 7 / span 5; } + .material-grid__offset--small--6.material-grid__col--small--6 { + grid-column: 7 / span 6; } + .material-grid__offset--small--6.material-grid__col--small--7 { + grid-column: 7 / span 7; } + .material-grid__offset--small--6.material-grid__col--small--8 { + grid-column: 7 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--6 { grid-row: span 6; } @@ -591,6 +927,22 @@ body { grid-column: span 10.5; } .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--small--7.material-grid__col--small--1 { + grid-column: 8 / span 1; } + .material-grid__offset--small--7.material-grid__col--small--2 { + grid-column: 8 / span 2; } + .material-grid__offset--small--7.material-grid__col--small--3 { + grid-column: 8 / span 3; } + .material-grid__offset--small--7.material-grid__col--small--4 { + grid-column: 8 / span 4; } + .material-grid__offset--small--7.material-grid__col--small--5 { + grid-column: 8 / span 5; } + .material-grid__offset--small--7.material-grid__col--small--6 { + grid-column: 8 / span 6; } + .material-grid__offset--small--7.material-grid__col--small--7 { + grid-column: 8 / span 7; } + .material-grid__offset--small--7.material-grid__col--small--8 { + grid-column: 8 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--7 { grid-row: span 7; } @@ -598,6 +950,22 @@ body { grid-column: span 12; } .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--small--8.material-grid__col--small--1 { + grid-column: 9 / span 1; } + .material-grid__offset--small--8.material-grid__col--small--2 { + grid-column: 9 / span 2; } + .material-grid__offset--small--8.material-grid__col--small--3 { + grid-column: 9 / span 3; } + .material-grid__offset--small--8.material-grid__col--small--4 { + grid-column: 9 / span 4; } + .material-grid__offset--small--8.material-grid__col--small--5 { + grid-column: 9 / span 5; } + .material-grid__offset--small--8.material-grid__col--small--6 { + grid-column: 9 / span 6; } + .material-grid__offset--small--8.material-grid__col--small--7 { + grid-column: 9 / span 7; } + .material-grid__offset--small--8.material-grid__col--small--8 { + grid-column: 9 / span 8; } .material-grid--fluid-rows > .material-grid__height--small--8 { grid-row: span 8; } @@ -605,6 +973,30 @@ body { grid-column: span 1; } .material-grid__col--medium--1.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 1; } + .material-grid__offset--medium--1.material-grid__col--medium--1 { + grid-column: 2 / span 1; } + .material-grid__offset--medium--1.material-grid__col--medium--2 { + grid-column: 2 / span 2; } + .material-grid__offset--medium--1.material-grid__col--medium--3 { + grid-column: 2 / span 3; } + .material-grid__offset--medium--1.material-grid__col--medium--4 { + grid-column: 2 / span 4; } + .material-grid__offset--medium--1.material-grid__col--medium--5 { + grid-column: 2 / span 5; } + .material-grid__offset--medium--1.material-grid__col--medium--6 { + grid-column: 2 / span 6; } + .material-grid__offset--medium--1.material-grid__col--medium--7 { + grid-column: 2 / span 7; } + .material-grid__offset--medium--1.material-grid__col--medium--8 { + grid-column: 2 / span 8; } + .material-grid__offset--medium--1.material-grid__col--medium--9 { + grid-column: 2 / span 9; } + .material-grid__offset--medium--1.material-grid__col--medium--10 { + grid-column: 2 / span 10; } + .material-grid__offset--medium--1.material-grid__col--medium--11 { + grid-column: 2 / span 11; } + .material-grid__offset--medium--1.material-grid__col--medium--12 { + grid-column: 2 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--1 { grid-row: span 1; } @@ -612,6 +1004,30 @@ body { grid-column: span 2; } .material-grid__col--medium--2.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 2; } + .material-grid__offset--medium--2.material-grid__col--medium--1 { + grid-column: 3 / span 1; } + .material-grid__offset--medium--2.material-grid__col--medium--2 { + grid-column: 3 / span 2; } + .material-grid__offset--medium--2.material-grid__col--medium--3 { + grid-column: 3 / span 3; } + .material-grid__offset--medium--2.material-grid__col--medium--4 { + grid-column: 3 / span 4; } + .material-grid__offset--medium--2.material-grid__col--medium--5 { + grid-column: 3 / span 5; } + .material-grid__offset--medium--2.material-grid__col--medium--6 { + grid-column: 3 / span 6; } + .material-grid__offset--medium--2.material-grid__col--medium--7 { + grid-column: 3 / span 7; } + .material-grid__offset--medium--2.material-grid__col--medium--8 { + grid-column: 3 / span 8; } + .material-grid__offset--medium--2.material-grid__col--medium--9 { + grid-column: 3 / span 9; } + .material-grid__offset--medium--2.material-grid__col--medium--10 { + grid-column: 3 / span 10; } + .material-grid__offset--medium--2.material-grid__col--medium--11 { + grid-column: 3 / span 11; } + .material-grid__offset--medium--2.material-grid__col--medium--12 { + grid-column: 3 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--2 { grid-row: span 2; } @@ -619,6 +1035,30 @@ body { grid-column: span 3; } .material-grid__col--medium--3.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 3; } + .material-grid__offset--medium--3.material-grid__col--medium--1 { + grid-column: 4 / span 1; } + .material-grid__offset--medium--3.material-grid__col--medium--2 { + grid-column: 4 / span 2; } + .material-grid__offset--medium--3.material-grid__col--medium--3 { + grid-column: 4 / span 3; } + .material-grid__offset--medium--3.material-grid__col--medium--4 { + grid-column: 4 / span 4; } + .material-grid__offset--medium--3.material-grid__col--medium--5 { + grid-column: 4 / span 5; } + .material-grid__offset--medium--3.material-grid__col--medium--6 { + grid-column: 4 / span 6; } + .material-grid__offset--medium--3.material-grid__col--medium--7 { + grid-column: 4 / span 7; } + .material-grid__offset--medium--3.material-grid__col--medium--8 { + grid-column: 4 / span 8; } + .material-grid__offset--medium--3.material-grid__col--medium--9 { + grid-column: 4 / span 9; } + .material-grid__offset--medium--3.material-grid__col--medium--10 { + grid-column: 4 / span 10; } + .material-grid__offset--medium--3.material-grid__col--medium--11 { + grid-column: 4 / span 11; } + .material-grid__offset--medium--3.material-grid__col--medium--12 { + grid-column: 4 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--3 { grid-row: span 3; } @@ -626,6 +1066,30 @@ body { grid-column: span 4; } .material-grid__col--medium--4.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 4; } + .material-grid__offset--medium--4.material-grid__col--medium--1 { + grid-column: 5 / span 1; } + .material-grid__offset--medium--4.material-grid__col--medium--2 { + grid-column: 5 / span 2; } + .material-grid__offset--medium--4.material-grid__col--medium--3 { + grid-column: 5 / span 3; } + .material-grid__offset--medium--4.material-grid__col--medium--4 { + grid-column: 5 / span 4; } + .material-grid__offset--medium--4.material-grid__col--medium--5 { + grid-column: 5 / span 5; } + .material-grid__offset--medium--4.material-grid__col--medium--6 { + grid-column: 5 / span 6; } + .material-grid__offset--medium--4.material-grid__col--medium--7 { + grid-column: 5 / span 7; } + .material-grid__offset--medium--4.material-grid__col--medium--8 { + grid-column: 5 / span 8; } + .material-grid__offset--medium--4.material-grid__col--medium--9 { + grid-column: 5 / span 9; } + .material-grid__offset--medium--4.material-grid__col--medium--10 { + grid-column: 5 / span 10; } + .material-grid__offset--medium--4.material-grid__col--medium--11 { + grid-column: 5 / span 11; } + .material-grid__offset--medium--4.material-grid__col--medium--12 { + grid-column: 5 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--4 { grid-row: span 4; } @@ -633,6 +1097,30 @@ body { grid-column: span 5; } .material-grid__col--medium--5.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 5; } + .material-grid__offset--medium--5.material-grid__col--medium--1 { + grid-column: 6 / span 1; } + .material-grid__offset--medium--5.material-grid__col--medium--2 { + grid-column: 6 / span 2; } + .material-grid__offset--medium--5.material-grid__col--medium--3 { + grid-column: 6 / span 3; } + .material-grid__offset--medium--5.material-grid__col--medium--4 { + grid-column: 6 / span 4; } + .material-grid__offset--medium--5.material-grid__col--medium--5 { + grid-column: 6 / span 5; } + .material-grid__offset--medium--5.material-grid__col--medium--6 { + grid-column: 6 / span 6; } + .material-grid__offset--medium--5.material-grid__col--medium--7 { + grid-column: 6 / span 7; } + .material-grid__offset--medium--5.material-grid__col--medium--8 { + grid-column: 6 / span 8; } + .material-grid__offset--medium--5.material-grid__col--medium--9 { + grid-column: 6 / span 9; } + .material-grid__offset--medium--5.material-grid__col--medium--10 { + grid-column: 6 / span 10; } + .material-grid__offset--medium--5.material-grid__col--medium--11 { + grid-column: 6 / span 11; } + .material-grid__offset--medium--5.material-grid__col--medium--12 { + grid-column: 6 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--5 { grid-row: span 5; } @@ -640,6 +1128,30 @@ body { grid-column: span 6; } .material-grid__col--medium--6.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 6; } + .material-grid__offset--medium--6.material-grid__col--medium--1 { + grid-column: 7 / span 1; } + .material-grid__offset--medium--6.material-grid__col--medium--2 { + grid-column: 7 / span 2; } + .material-grid__offset--medium--6.material-grid__col--medium--3 { + grid-column: 7 / span 3; } + .material-grid__offset--medium--6.material-grid__col--medium--4 { + grid-column: 7 / span 4; } + .material-grid__offset--medium--6.material-grid__col--medium--5 { + grid-column: 7 / span 5; } + .material-grid__offset--medium--6.material-grid__col--medium--6 { + grid-column: 7 / span 6; } + .material-grid__offset--medium--6.material-grid__col--medium--7 { + grid-column: 7 / span 7; } + .material-grid__offset--medium--6.material-grid__col--medium--8 { + grid-column: 7 / span 8; } + .material-grid__offset--medium--6.material-grid__col--medium--9 { + grid-column: 7 / span 9; } + .material-grid__offset--medium--6.material-grid__col--medium--10 { + grid-column: 7 / span 10; } + .material-grid__offset--medium--6.material-grid__col--medium--11 { + grid-column: 7 / span 11; } + .material-grid__offset--medium--6.material-grid__col--medium--12 { + grid-column: 7 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--6 { grid-row: span 6; } @@ -647,6 +1159,30 @@ body { grid-column: span 7; } .material-grid__col--medium--7.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 7; } + .material-grid__offset--medium--7.material-grid__col--medium--1 { + grid-column: 8 / span 1; } + .material-grid__offset--medium--7.material-grid__col--medium--2 { + grid-column: 8 / span 2; } + .material-grid__offset--medium--7.material-grid__col--medium--3 { + grid-column: 8 / span 3; } + .material-grid__offset--medium--7.material-grid__col--medium--4 { + grid-column: 8 / span 4; } + .material-grid__offset--medium--7.material-grid__col--medium--5 { + grid-column: 8 / span 5; } + .material-grid__offset--medium--7.material-grid__col--medium--6 { + grid-column: 8 / span 6; } + .material-grid__offset--medium--7.material-grid__col--medium--7 { + grid-column: 8 / span 7; } + .material-grid__offset--medium--7.material-grid__col--medium--8 { + grid-column: 8 / span 8; } + .material-grid__offset--medium--7.material-grid__col--medium--9 { + grid-column: 8 / span 9; } + .material-grid__offset--medium--7.material-grid__col--medium--10 { + grid-column: 8 / span 10; } + .material-grid__offset--medium--7.material-grid__col--medium--11 { + grid-column: 8 / span 11; } + .material-grid__offset--medium--7.material-grid__col--medium--12 { + grid-column: 8 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--7 { grid-row: span 7; } @@ -654,6 +1190,30 @@ body { grid-column: span 8; } .material-grid__col--medium--8.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 8; } + .material-grid__offset--medium--8.material-grid__col--medium--1 { + grid-column: 9 / span 1; } + .material-grid__offset--medium--8.material-grid__col--medium--2 { + grid-column: 9 / span 2; } + .material-grid__offset--medium--8.material-grid__col--medium--3 { + grid-column: 9 / span 3; } + .material-grid__offset--medium--8.material-grid__col--medium--4 { + grid-column: 9 / span 4; } + .material-grid__offset--medium--8.material-grid__col--medium--5 { + grid-column: 9 / span 5; } + .material-grid__offset--medium--8.material-grid__col--medium--6 { + grid-column: 9 / span 6; } + .material-grid__offset--medium--8.material-grid__col--medium--7 { + grid-column: 9 / span 7; } + .material-grid__offset--medium--8.material-grid__col--medium--8 { + grid-column: 9 / span 8; } + .material-grid__offset--medium--8.material-grid__col--medium--9 { + grid-column: 9 / span 9; } + .material-grid__offset--medium--8.material-grid__col--medium--10 { + grid-column: 9 / span 10; } + .material-grid__offset--medium--8.material-grid__col--medium--11 { + grid-column: 9 / span 11; } + .material-grid__offset--medium--8.material-grid__col--medium--12 { + grid-column: 9 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--8 { grid-row: span 8; } @@ -661,6 +1221,30 @@ body { grid-column: span 9; } .material-grid__col--medium--9.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 9; } + .material-grid__offset--medium--9.material-grid__col--medium--1 { + grid-column: 10 / span 1; } + .material-grid__offset--medium--9.material-grid__col--medium--2 { + grid-column: 10 / span 2; } + .material-grid__offset--medium--9.material-grid__col--medium--3 { + grid-column: 10 / span 3; } + .material-grid__offset--medium--9.material-grid__col--medium--4 { + grid-column: 10 / span 4; } + .material-grid__offset--medium--9.material-grid__col--medium--5 { + grid-column: 10 / span 5; } + .material-grid__offset--medium--9.material-grid__col--medium--6 { + grid-column: 10 / span 6; } + .material-grid__offset--medium--9.material-grid__col--medium--7 { + grid-column: 10 / span 7; } + .material-grid__offset--medium--9.material-grid__col--medium--8 { + grid-column: 10 / span 8; } + .material-grid__offset--medium--9.material-grid__col--medium--9 { + grid-column: 10 / span 9; } + .material-grid__offset--medium--9.material-grid__col--medium--10 { + grid-column: 10 / span 10; } + .material-grid__offset--medium--9.material-grid__col--medium--11 { + grid-column: 10 / span 11; } + .material-grid__offset--medium--9.material-grid__col--medium--12 { + grid-column: 10 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--9 { grid-row: span 9; } @@ -668,6 +1252,30 @@ body { grid-column: span 10; } .material-grid__col--medium--10.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 10; } + .material-grid__offset--medium--10.material-grid__col--medium--1 { + grid-column: 11 / span 1; } + .material-grid__offset--medium--10.material-grid__col--medium--2 { + grid-column: 11 / span 2; } + .material-grid__offset--medium--10.material-grid__col--medium--3 { + grid-column: 11 / span 3; } + .material-grid__offset--medium--10.material-grid__col--medium--4 { + grid-column: 11 / span 4; } + .material-grid__offset--medium--10.material-grid__col--medium--5 { + grid-column: 11 / span 5; } + .material-grid__offset--medium--10.material-grid__col--medium--6 { + grid-column: 11 / span 6; } + .material-grid__offset--medium--10.material-grid__col--medium--7 { + grid-column: 11 / span 7; } + .material-grid__offset--medium--10.material-grid__col--medium--8 { + grid-column: 11 / span 8; } + .material-grid__offset--medium--10.material-grid__col--medium--9 { + grid-column: 11 / span 9; } + .material-grid__offset--medium--10.material-grid__col--medium--10 { + grid-column: 11 / span 10; } + .material-grid__offset--medium--10.material-grid__col--medium--11 { + grid-column: 11 / span 11; } + .material-grid__offset--medium--10.material-grid__col--medium--12 { + grid-column: 11 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--10 { grid-row: span 10; } @@ -675,6 +1283,30 @@ body { grid-column: span 11; } .material-grid__col--medium--11.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 11; } + .material-grid__offset--medium--11.material-grid__col--medium--1 { + grid-column: 12 / span 1; } + .material-grid__offset--medium--11.material-grid__col--medium--2 { + grid-column: 12 / span 2; } + .material-grid__offset--medium--11.material-grid__col--medium--3 { + grid-column: 12 / span 3; } + .material-grid__offset--medium--11.material-grid__col--medium--4 { + grid-column: 12 / span 4; } + .material-grid__offset--medium--11.material-grid__col--medium--5 { + grid-column: 12 / span 5; } + .material-grid__offset--medium--11.material-grid__col--medium--6 { + grid-column: 12 / span 6; } + .material-grid__offset--medium--11.material-grid__col--medium--7 { + grid-column: 12 / span 7; } + .material-grid__offset--medium--11.material-grid__col--medium--8 { + grid-column: 12 / span 8; } + .material-grid__offset--medium--11.material-grid__col--medium--9 { + grid-column: 12 / span 9; } + .material-grid__offset--medium--11.material-grid__col--medium--10 { + grid-column: 12 / span 10; } + .material-grid__offset--medium--11.material-grid__col--medium--11 { + grid-column: 12 / span 11; } + .material-grid__offset--medium--11.material-grid__col--medium--12 { + grid-column: 12 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--11 { grid-row: span 11; } @@ -682,6 +1314,30 @@ body { grid-column: span 12; } .material-grid__col--medium--12.material-grid > *:not([class*="material-grid__col"]) { grid-column: span 12; } + .material-grid__offset--medium--12.material-grid__col--medium--1 { + grid-column: 13 / span 1; } + .material-grid__offset--medium--12.material-grid__col--medium--2 { + grid-column: 13 / span 2; } + .material-grid__offset--medium--12.material-grid__col--medium--3 { + grid-column: 13 / span 3; } + .material-grid__offset--medium--12.material-grid__col--medium--4 { + grid-column: 13 / span 4; } + .material-grid__offset--medium--12.material-grid__col--medium--5 { + grid-column: 13 / span 5; } + .material-grid__offset--medium--12.material-grid__col--medium--6 { + grid-column: 13 / span 6; } + .material-grid__offset--medium--12.material-grid__col--medium--7 { + grid-column: 13 / span 7; } + .material-grid__offset--medium--12.material-grid__col--medium--8 { + grid-column: 13 / span 8; } + .material-grid__offset--medium--12.material-grid__col--medium--9 { + grid-column: 13 / span 9; } + .material-grid__offset--medium--12.material-grid__col--medium--10 { + grid-column: 13 / span 10; } + .material-grid__offset--medium--12.material-grid__col--medium--11 { + grid-column: 13 / span 11; } + .material-grid__offset--medium--12.material-grid__col--medium--12 { + grid-column: 13 / span 12; } .material-grid--fluid-rows > .material-grid__height--medium--12 { grid-row: span 12; } } diff --git a/examples/material/css-gridish/css/material-grid.min.css b/examples/material/css-gridish/css/material-grid.min.css index a7bc883..e069473 100755 --- a/examples/material/css-gridish/css/material-grid.min.css +++ b/examples/material/css-gridish/css/material-grid.min.css @@ -1 +1 @@ -html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--scrollbar-width:0px;--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__height--xsmall--5{grid-row:span 5}.material-grid__height--xsmall--6{grid-row:span 6}.material-grid__height--xsmall--7{grid-row:span 7}.material-grid__height--xsmall--8{grid-row:span 8}.material-grid__height--xsmall--9{grid-row:span 9}.material-grid__height--xsmall--10{grid-row:span 10}.material-grid__height--xsmall--11{grid-row:span 11}.material-grid__height--xsmall--12{grid-row:span 12}.material-grid__height--xsmall--13{grid-row:span 13}.material-grid__height--xsmall--14{grid-row:span 14}.material-grid__height--xsmall--15{grid-row:span 15}.material-grid__height--xsmall--16{grid-row:span 16}.material-grid__height--xsmall--17{grid-row:span 17}.material-grid__height--xsmall--18{grid-row:span 18}.material-grid__height--xsmall--19{grid-row:span 19}.material-grid__height--xsmall--20{grid-row:span 20}.material-grid__height--xsmall--21{grid-row:span 21}.material-grid__height--xsmall--22{grid-row:span 22}.material-grid__height--xsmall--23{grid-row:span 23}.material-grid__height--xsmall--24{grid-row:span 24}.material-grid__height--xsmall--25{grid-row:span 25}.material-grid__height--xsmall--26{grid-row:span 26}.material-grid__height--xsmall--27{grid-row:span 27}.material-grid__height--xsmall--28{grid-row:span 28}.material-grid__height--xsmall--29{grid-row:span 29}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1,.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2,.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3,.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4,.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1}.material-grid__height--small--2{grid-row:span 2}.material-grid__height--small--3{grid-row:span 3}.material-grid__height--small--4{grid-row:span 4}.material-grid__height--small--5{grid-row:span 5}.material-grid__height--small--6{grid-row:span 6}.material-grid__height--small--7{grid-row:span 7}.material-grid__height--small--8{grid-row:span 8}.material-grid__height--small--9{grid-row:span 9}.material-grid__height--small--10{grid-row:span 10}.material-grid__height--small--11{grid-row:span 11}.material-grid__height--small--12{grid-row:span 12}.material-grid__height--small--13{grid-row:span 13}.material-grid__height--small--14{grid-row:span 14}.material-grid__height--small--15{grid-row:span 15}.material-grid__height--small--16{grid-row:span 16}.material-grid__height--small--17{grid-row:span 17}.material-grid__height--small--18{grid-row:span 18}.material-grid__height--small--19{grid-row:span 19}.material-grid__height--small--20{grid-row:span 20}.material-grid__height--small--21{grid-row:span 21}.material-grid__height--small--22{grid-row:span 22}.material-grid__height--small--23{grid-row:span 23}.material-grid__height--small--24{grid-row:span 24}.material-grid__height--small--25{grid-row:span 25}.material-grid__height--small--26{grid-row:span 26}.material-grid__height--small--27{grid-row:span 27}.material-grid__height--small--28{grid-row:span 28}.material-grid__height--small--29{grid-row:span 29}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1,.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2,.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3,.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4,.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5,.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6,.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7,.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8,.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1}.material-grid__height--medium--2{grid-row:span 2}.material-grid__height--medium--3{grid-row:span 3}.material-grid__height--medium--4{grid-row:span 4}.material-grid__height--medium--5{grid-row:span 5}.material-grid__height--medium--6{grid-row:span 6}.material-grid__height--medium--7{grid-row:span 7}.material-grid__height--medium--8{grid-row:span 8}.material-grid__height--medium--9{grid-row:span 9}.material-grid__height--medium--10{grid-row:span 10}.material-grid__height--medium--11{grid-row:span 11}.material-grid__height--medium--12{grid-row:span 12}.material-grid__height--medium--13{grid-row:span 13}.material-grid__height--medium--14{grid-row:span 14}.material-grid__height--medium--15{grid-row:span 15}.material-grid__height--medium--16{grid-row:span 16}.material-grid__height--medium--17{grid-row:span 17}.material-grid__height--medium--18{grid-row:span 18}.material-grid__height--medium--19{grid-row:span 19}.material-grid__height--medium--20{grid-row:span 20}.material-grid__height--medium--21{grid-row:span 21}.material-grid__height--medium--22{grid-row:span 22}.material-grid__height--medium--23{grid-row:span 23}.material-grid__height--medium--24{grid-row:span 24}.material-grid__height--medium--25{grid-row:span 25}.material-grid__height--medium--26{grid-row:span 26}.material-grid__height--medium--27{grid-row:span 27}.material-grid__height--medium--28{grid-row:span 28}.material-grid__height--medium--29{grid-row:span 29}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1{grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2{grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3{grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4{grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5{grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6{grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7{grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8{grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}.material-grid__col--medium--1,.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1}.material-grid__col--medium--2,.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2}.material-grid__col--medium--3,.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3}.material-grid__col--medium--4,.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4}.material-grid__col--medium--5,.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5}.material-grid__col--medium--6,.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6}.material-grid__col--medium--7,.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7}.material-grid__col--medium--8,.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8}.material-grid__col--medium--9,.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9}.material-grid__col--medium--10,.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10}.material-grid__col--medium--11,.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11}.material-grid__col--medium--12,.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file +html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--scrollbar-width:0px;--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__height--xsmall--5{grid-row:span 5}.material-grid__height--xsmall--6{grid-row:span 6}.material-grid__height--xsmall--7{grid-row:span 7}.material-grid__height--xsmall--8{grid-row:span 8}.material-grid__height--xsmall--9{grid-row:span 9}.material-grid__height--xsmall--10{grid-row:span 10}.material-grid__height--xsmall--11{grid-row:span 11}.material-grid__height--xsmall--12{grid-row:span 12}.material-grid__height--xsmall--13{grid-row:span 13}.material-grid__height--xsmall--14{grid-row:span 14}.material-grid__height--xsmall--15{grid-row:span 15}.material-grid__height--xsmall--16{grid-row:span 16}.material-grid__height--xsmall--17{grid-row:span 17}.material-grid__height--xsmall--18{grid-row:span 18}.material-grid__height--xsmall--19{grid-row:span 19}.material-grid__height--xsmall--20{grid-row:span 20}.material-grid__height--xsmall--21{grid-row:span 21}.material-grid__height--xsmall--22{grid-row:span 22}.material-grid__height--xsmall--23{grid-row:span 23}.material-grid__height--xsmall--24{grid-row:span 24}.material-grid__height--xsmall--25{grid-row:span 25}.material-grid__height--xsmall--26{grid-row:span 26}.material-grid__height--xsmall--27{grid-row:span 27}.material-grid__height--xsmall--28{grid-row:span 28}.material-grid__height--xsmall--29{grid-row:span 29}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1,.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2,.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3,.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4,.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1}.material-grid__height--small--2{grid-row:span 2}.material-grid__height--small--3{grid-row:span 3}.material-grid__height--small--4{grid-row:span 4}.material-grid__height--small--5{grid-row:span 5}.material-grid__height--small--6{grid-row:span 6}.material-grid__height--small--7{grid-row:span 7}.material-grid__height--small--8{grid-row:span 8}.material-grid__height--small--9{grid-row:span 9}.material-grid__height--small--10{grid-row:span 10}.material-grid__height--small--11{grid-row:span 11}.material-grid__height--small--12{grid-row:span 12}.material-grid__height--small--13{grid-row:span 13}.material-grid__height--small--14{grid-row:span 14}.material-grid__height--small--15{grid-row:span 15}.material-grid__height--small--16{grid-row:span 16}.material-grid__height--small--17{grid-row:span 17}.material-grid__height--small--18{grid-row:span 18}.material-grid__height--small--19{grid-row:span 19}.material-grid__height--small--20{grid-row:span 20}.material-grid__height--small--21{grid-row:span 21}.material-grid__height--small--22{grid-row:span 22}.material-grid__height--small--23{grid-row:span 23}.material-grid__height--small--24{grid-row:span 24}.material-grid__height--small--25{grid-row:span 25}.material-grid__height--small--26{grid-row:span 26}.material-grid__height--small--27{grid-row:span 27}.material-grid__height--small--28{grid-row:span 28}.material-grid__height--small--29{grid-row:span 29}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1,.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--small--1.material-grid__col--small--1{grid-column:2/span 1}.material-grid__offset--small--1.material-grid__col--small--2{grid-column:2/span 2}.material-grid__offset--small--1.material-grid__col--small--3{grid-column:2/span 3}.material-grid__offset--small--1.material-grid__col--small--4{grid-column:2/span 4}.material-grid__offset--small--1.material-grid__col--small--5{grid-column:2/span 5}.material-grid__offset--small--1.material-grid__col--small--6{grid-column:2/span 6}.material-grid__offset--small--1.material-grid__col--small--7{grid-column:2/span 7}.material-grid__offset--small--1.material-grid__col--small--8{grid-column:2/span 8}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2,.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--small--2.material-grid__col--small--1{grid-column:3/span 1}.material-grid__offset--small--2.material-grid__col--small--2{grid-column:3/span 2}.material-grid__offset--small--2.material-grid__col--small--3{grid-column:3/span 3}.material-grid__offset--small--2.material-grid__col--small--4{grid-column:3/span 4}.material-grid__offset--small--2.material-grid__col--small--5{grid-column:3/span 5}.material-grid__offset--small--2.material-grid__col--small--6{grid-column:3/span 6}.material-grid__offset--small--2.material-grid__col--small--7{grid-column:3/span 7}.material-grid__offset--small--2.material-grid__col--small--8{grid-column:3/span 8}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3,.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--small--3.material-grid__col--small--1{grid-column:4/span 1}.material-grid__offset--small--3.material-grid__col--small--2{grid-column:4/span 2}.material-grid__offset--small--3.material-grid__col--small--3{grid-column:4/span 3}.material-grid__offset--small--3.material-grid__col--small--4{grid-column:4/span 4}.material-grid__offset--small--3.material-grid__col--small--5{grid-column:4/span 5}.material-grid__offset--small--3.material-grid__col--small--6{grid-column:4/span 6}.material-grid__offset--small--3.material-grid__col--small--7{grid-column:4/span 7}.material-grid__offset--small--3.material-grid__col--small--8{grid-column:4/span 8}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4,.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--small--4.material-grid__col--small--1{grid-column:5/span 1}.material-grid__offset--small--4.material-grid__col--small--2{grid-column:5/span 2}.material-grid__offset--small--4.material-grid__col--small--3{grid-column:5/span 3}.material-grid__offset--small--4.material-grid__col--small--4{grid-column:5/span 4}.material-grid__offset--small--4.material-grid__col--small--5{grid-column:5/span 5}.material-grid__offset--small--4.material-grid__col--small--6{grid-column:5/span 6}.material-grid__offset--small--4.material-grid__col--small--7{grid-column:5/span 7}.material-grid__offset--small--4.material-grid__col--small--8{grid-column:5/span 8}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5,.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--small--5.material-grid__col--small--1{grid-column:6/span 1}.material-grid__offset--small--5.material-grid__col--small--2{grid-column:6/span 2}.material-grid__offset--small--5.material-grid__col--small--3{grid-column:6/span 3}.material-grid__offset--small--5.material-grid__col--small--4{grid-column:6/span 4}.material-grid__offset--small--5.material-grid__col--small--5{grid-column:6/span 5}.material-grid__offset--small--5.material-grid__col--small--6{grid-column:6/span 6}.material-grid__offset--small--5.material-grid__col--small--7{grid-column:6/span 7}.material-grid__offset--small--5.material-grid__col--small--8{grid-column:6/span 8}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6,.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--small--6.material-grid__col--small--1{grid-column:7/span 1}.material-grid__offset--small--6.material-grid__col--small--2{grid-column:7/span 2}.material-grid__offset--small--6.material-grid__col--small--3{grid-column:7/span 3}.material-grid__offset--small--6.material-grid__col--small--4{grid-column:7/span 4}.material-grid__offset--small--6.material-grid__col--small--5{grid-column:7/span 5}.material-grid__offset--small--6.material-grid__col--small--6{grid-column:7/span 6}.material-grid__offset--small--6.material-grid__col--small--7{grid-column:7/span 7}.material-grid__offset--small--6.material-grid__col--small--8{grid-column:7/span 8}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7,.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--small--7.material-grid__col--small--1{grid-column:8/span 1}.material-grid__offset--small--7.material-grid__col--small--2{grid-column:8/span 2}.material-grid__offset--small--7.material-grid__col--small--3{grid-column:8/span 3}.material-grid__offset--small--7.material-grid__col--small--4{grid-column:8/span 4}.material-grid__offset--small--7.material-grid__col--small--5{grid-column:8/span 5}.material-grid__offset--small--7.material-grid__col--small--6{grid-column:8/span 6}.material-grid__offset--small--7.material-grid__col--small--7{grid-column:8/span 7}.material-grid__offset--small--7.material-grid__col--small--8{grid-column:8/span 8}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8,.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--small--8.material-grid__col--small--1{grid-column:9/span 1}.material-grid__offset--small--8.material-grid__col--small--2{grid-column:9/span 2}.material-grid__offset--small--8.material-grid__col--small--3{grid-column:9/span 3}.material-grid__offset--small--8.material-grid__col--small--4{grid-column:9/span 4}.material-grid__offset--small--8.material-grid__col--small--5{grid-column:9/span 5}.material-grid__offset--small--8.material-grid__col--small--6{grid-column:9/span 6}.material-grid__offset--small--8.material-grid__col--small--7{grid-column:9/span 7}.material-grid__offset--small--8.material-grid__col--small--8{grid-column:9/span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1}.material-grid__height--medium--2{grid-row:span 2}.material-grid__height--medium--3{grid-row:span 3}.material-grid__height--medium--4{grid-row:span 4}.material-grid__height--medium--5{grid-row:span 5}.material-grid__height--medium--6{grid-row:span 6}.material-grid__height--medium--7{grid-row:span 7}.material-grid__height--medium--8{grid-row:span 8}.material-grid__height--medium--9{grid-row:span 9}.material-grid__height--medium--10{grid-row:span 10}.material-grid__height--medium--11{grid-row:span 11}.material-grid__height--medium--12{grid-row:span 12}.material-grid__height--medium--13{grid-row:span 13}.material-grid__height--medium--14{grid-row:span 14}.material-grid__height--medium--15{grid-row:span 15}.material-grid__height--medium--16{grid-row:span 16}.material-grid__height--medium--17{grid-row:span 17}.material-grid__height--medium--18{grid-row:span 18}.material-grid__height--medium--19{grid-row:span 19}.material-grid__height--medium--20{grid-row:span 20}.material-grid__height--medium--21{grid-row:span 21}.material-grid__height--medium--22{grid-row:span 22}.material-grid__height--medium--23{grid-row:span 23}.material-grid__height--medium--24{grid-row:span 24}.material-grid__height--medium--25{grid-row:span 25}.material-grid__height--medium--26{grid-row:span 26}.material-grid__height--medium--27{grid-row:span 27}.material-grid__height--medium--28{grid-row:span 28}.material-grid__height--medium--29{grid-row:span 29}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--1{grid-column:2/span 1}.material-grid__offset--xsmall--1.material-grid__col--xsmall--2{grid-column:2/span 2}.material-grid__offset--xsmall--1.material-grid__col--xsmall--3{grid-column:2/span 3}.material-grid__offset--xsmall--1.material-grid__col--xsmall--4{grid-column:2/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--1{grid-column:3/span 1}.material-grid__offset--xsmall--2.material-grid__col--xsmall--2{grid-column:3/span 2}.material-grid__offset--xsmall--2.material-grid__col--xsmall--3{grid-column:3/span 3}.material-grid__offset--xsmall--2.material-grid__col--xsmall--4{grid-column:3/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--1{grid-column:4/span 1}.material-grid__offset--xsmall--3.material-grid__col--xsmall--2{grid-column:4/span 2}.material-grid__offset--xsmall--3.material-grid__col--xsmall--3{grid-column:4/span 3}.material-grid__offset--xsmall--3.material-grid__col--xsmall--4{grid-column:4/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--xsmall--4.material-grid__col--xsmall--1{grid-column:5/span 1}.material-grid__offset--xsmall--4.material-grid__col--xsmall--2{grid-column:5/span 2}.material-grid__offset--xsmall--4.material-grid__col--xsmall--3{grid-column:5/span 3}.material-grid__offset--xsmall--4.material-grid__col--xsmall--4{grid-column:5/span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1{grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--small--1.material-grid__col--small--1{grid-column:2/span 1}.material-grid__offset--small--1.material-grid__col--small--2{grid-column:2/span 2}.material-grid__offset--small--1.material-grid__col--small--3{grid-column:2/span 3}.material-grid__offset--small--1.material-grid__col--small--4{grid-column:2/span 4}.material-grid__offset--small--1.material-grid__col--small--5{grid-column:2/span 5}.material-grid__offset--small--1.material-grid__col--small--6{grid-column:2/span 6}.material-grid__offset--small--1.material-grid__col--small--7{grid-column:2/span 7}.material-grid__offset--small--1.material-grid__col--small--8{grid-column:2/span 8}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2{grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--small--2.material-grid__col--small--1{grid-column:3/span 1}.material-grid__offset--small--2.material-grid__col--small--2{grid-column:3/span 2}.material-grid__offset--small--2.material-grid__col--small--3{grid-column:3/span 3}.material-grid__offset--small--2.material-grid__col--small--4{grid-column:3/span 4}.material-grid__offset--small--2.material-grid__col--small--5{grid-column:3/span 5}.material-grid__offset--small--2.material-grid__col--small--6{grid-column:3/span 6}.material-grid__offset--small--2.material-grid__col--small--7{grid-column:3/span 7}.material-grid__offset--small--2.material-grid__col--small--8{grid-column:3/span 8}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3{grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--small--3.material-grid__col--small--1{grid-column:4/span 1}.material-grid__offset--small--3.material-grid__col--small--2{grid-column:4/span 2}.material-grid__offset--small--3.material-grid__col--small--3{grid-column:4/span 3}.material-grid__offset--small--3.material-grid__col--small--4{grid-column:4/span 4}.material-grid__offset--small--3.material-grid__col--small--5{grid-column:4/span 5}.material-grid__offset--small--3.material-grid__col--small--6{grid-column:4/span 6}.material-grid__offset--small--3.material-grid__col--small--7{grid-column:4/span 7}.material-grid__offset--small--3.material-grid__col--small--8{grid-column:4/span 8}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4{grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--small--4.material-grid__col--small--1{grid-column:5/span 1}.material-grid__offset--small--4.material-grid__col--small--2{grid-column:5/span 2}.material-grid__offset--small--4.material-grid__col--small--3{grid-column:5/span 3}.material-grid__offset--small--4.material-grid__col--small--4{grid-column:5/span 4}.material-grid__offset--small--4.material-grid__col--small--5{grid-column:5/span 5}.material-grid__offset--small--4.material-grid__col--small--6{grid-column:5/span 6}.material-grid__offset--small--4.material-grid__col--small--7{grid-column:5/span 7}.material-grid__offset--small--4.material-grid__col--small--8{grid-column:5/span 8}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5{grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--small--5.material-grid__col--small--1{grid-column:6/span 1}.material-grid__offset--small--5.material-grid__col--small--2{grid-column:6/span 2}.material-grid__offset--small--5.material-grid__col--small--3{grid-column:6/span 3}.material-grid__offset--small--5.material-grid__col--small--4{grid-column:6/span 4}.material-grid__offset--small--5.material-grid__col--small--5{grid-column:6/span 5}.material-grid__offset--small--5.material-grid__col--small--6{grid-column:6/span 6}.material-grid__offset--small--5.material-grid__col--small--7{grid-column:6/span 7}.material-grid__offset--small--5.material-grid__col--small--8{grid-column:6/span 8}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6{grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--small--6.material-grid__col--small--1{grid-column:7/span 1}.material-grid__offset--small--6.material-grid__col--small--2{grid-column:7/span 2}.material-grid__offset--small--6.material-grid__col--small--3{grid-column:7/span 3}.material-grid__offset--small--6.material-grid__col--small--4{grid-column:7/span 4}.material-grid__offset--small--6.material-grid__col--small--5{grid-column:7/span 5}.material-grid__offset--small--6.material-grid__col--small--6{grid-column:7/span 6}.material-grid__offset--small--6.material-grid__col--small--7{grid-column:7/span 7}.material-grid__offset--small--6.material-grid__col--small--8{grid-column:7/span 8}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7{grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--small--7.material-grid__col--small--1{grid-column:8/span 1}.material-grid__offset--small--7.material-grid__col--small--2{grid-column:8/span 2}.material-grid__offset--small--7.material-grid__col--small--3{grid-column:8/span 3}.material-grid__offset--small--7.material-grid__col--small--4{grid-column:8/span 4}.material-grid__offset--small--7.material-grid__col--small--5{grid-column:8/span 5}.material-grid__offset--small--7.material-grid__col--small--6{grid-column:8/span 6}.material-grid__offset--small--7.material-grid__col--small--7{grid-column:8/span 7}.material-grid__offset--small--7.material-grid__col--small--8{grid-column:8/span 8}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8{grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--small--8.material-grid__col--small--1{grid-column:9/span 1}.material-grid__offset--small--8.material-grid__col--small--2{grid-column:9/span 2}.material-grid__offset--small--8.material-grid__col--small--3{grid-column:9/span 3}.material-grid__offset--small--8.material-grid__col--small--4{grid-column:9/span 4}.material-grid__offset--small--8.material-grid__col--small--5{grid-column:9/span 5}.material-grid__offset--small--8.material-grid__col--small--6{grid-column:9/span 6}.material-grid__offset--small--8.material-grid__col--small--7{grid-column:9/span 7}.material-grid__offset--small--8.material-grid__col--small--8{grid-column:9/span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}.material-grid__col--medium--1,.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid__offset--medium--1.material-grid__col--medium--1{grid-column:2/span 1}.material-grid__offset--medium--1.material-grid__col--medium--2{grid-column:2/span 2}.material-grid__offset--medium--1.material-grid__col--medium--3{grid-column:2/span 3}.material-grid__offset--medium--1.material-grid__col--medium--4{grid-column:2/span 4}.material-grid__offset--medium--1.material-grid__col--medium--5{grid-column:2/span 5}.material-grid__offset--medium--1.material-grid__col--medium--6{grid-column:2/span 6}.material-grid__offset--medium--1.material-grid__col--medium--7{grid-column:2/span 7}.material-grid__offset--medium--1.material-grid__col--medium--8{grid-column:2/span 8}.material-grid__offset--medium--1.material-grid__col--medium--9{grid-column:2/span 9}.material-grid__offset--medium--1.material-grid__col--medium--10{grid-column:2/span 10}.material-grid__offset--medium--1.material-grid__col--medium--11{grid-column:2/span 11}.material-grid__offset--medium--1.material-grid__col--medium--12{grid-column:2/span 12}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1}.material-grid__col--medium--2,.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid__offset--medium--2.material-grid__col--medium--1{grid-column:3/span 1}.material-grid__offset--medium--2.material-grid__col--medium--2{grid-column:3/span 2}.material-grid__offset--medium--2.material-grid__col--medium--3{grid-column:3/span 3}.material-grid__offset--medium--2.material-grid__col--medium--4{grid-column:3/span 4}.material-grid__offset--medium--2.material-grid__col--medium--5{grid-column:3/span 5}.material-grid__offset--medium--2.material-grid__col--medium--6{grid-column:3/span 6}.material-grid__offset--medium--2.material-grid__col--medium--7{grid-column:3/span 7}.material-grid__offset--medium--2.material-grid__col--medium--8{grid-column:3/span 8}.material-grid__offset--medium--2.material-grid__col--medium--9{grid-column:3/span 9}.material-grid__offset--medium--2.material-grid__col--medium--10{grid-column:3/span 10}.material-grid__offset--medium--2.material-grid__col--medium--11{grid-column:3/span 11}.material-grid__offset--medium--2.material-grid__col--medium--12{grid-column:3/span 12}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2}.material-grid__col--medium--3,.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid__offset--medium--3.material-grid__col--medium--1{grid-column:4/span 1}.material-grid__offset--medium--3.material-grid__col--medium--2{grid-column:4/span 2}.material-grid__offset--medium--3.material-grid__col--medium--3{grid-column:4/span 3}.material-grid__offset--medium--3.material-grid__col--medium--4{grid-column:4/span 4}.material-grid__offset--medium--3.material-grid__col--medium--5{grid-column:4/span 5}.material-grid__offset--medium--3.material-grid__col--medium--6{grid-column:4/span 6}.material-grid__offset--medium--3.material-grid__col--medium--7{grid-column:4/span 7}.material-grid__offset--medium--3.material-grid__col--medium--8{grid-column:4/span 8}.material-grid__offset--medium--3.material-grid__col--medium--9{grid-column:4/span 9}.material-grid__offset--medium--3.material-grid__col--medium--10{grid-column:4/span 10}.material-grid__offset--medium--3.material-grid__col--medium--11{grid-column:4/span 11}.material-grid__offset--medium--3.material-grid__col--medium--12{grid-column:4/span 12}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3}.material-grid__col--medium--4,.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid__offset--medium--4.material-grid__col--medium--1{grid-column:5/span 1}.material-grid__offset--medium--4.material-grid__col--medium--2{grid-column:5/span 2}.material-grid__offset--medium--4.material-grid__col--medium--3{grid-column:5/span 3}.material-grid__offset--medium--4.material-grid__col--medium--4{grid-column:5/span 4}.material-grid__offset--medium--4.material-grid__col--medium--5{grid-column:5/span 5}.material-grid__offset--medium--4.material-grid__col--medium--6{grid-column:5/span 6}.material-grid__offset--medium--4.material-grid__col--medium--7{grid-column:5/span 7}.material-grid__offset--medium--4.material-grid__col--medium--8{grid-column:5/span 8}.material-grid__offset--medium--4.material-grid__col--medium--9{grid-column:5/span 9}.material-grid__offset--medium--4.material-grid__col--medium--10{grid-column:5/span 10}.material-grid__offset--medium--4.material-grid__col--medium--11{grid-column:5/span 11}.material-grid__offset--medium--4.material-grid__col--medium--12{grid-column:5/span 12}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4}.material-grid__col--medium--5,.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid__offset--medium--5.material-grid__col--medium--1{grid-column:6/span 1}.material-grid__offset--medium--5.material-grid__col--medium--2{grid-column:6/span 2}.material-grid__offset--medium--5.material-grid__col--medium--3{grid-column:6/span 3}.material-grid__offset--medium--5.material-grid__col--medium--4{grid-column:6/span 4}.material-grid__offset--medium--5.material-grid__col--medium--5{grid-column:6/span 5}.material-grid__offset--medium--5.material-grid__col--medium--6{grid-column:6/span 6}.material-grid__offset--medium--5.material-grid__col--medium--7{grid-column:6/span 7}.material-grid__offset--medium--5.material-grid__col--medium--8{grid-column:6/span 8}.material-grid__offset--medium--5.material-grid__col--medium--9{grid-column:6/span 9}.material-grid__offset--medium--5.material-grid__col--medium--10{grid-column:6/span 10}.material-grid__offset--medium--5.material-grid__col--medium--11{grid-column:6/span 11}.material-grid__offset--medium--5.material-grid__col--medium--12{grid-column:6/span 12}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5}.material-grid__col--medium--6,.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid__offset--medium--6.material-grid__col--medium--1{grid-column:7/span 1}.material-grid__offset--medium--6.material-grid__col--medium--2{grid-column:7/span 2}.material-grid__offset--medium--6.material-grid__col--medium--3{grid-column:7/span 3}.material-grid__offset--medium--6.material-grid__col--medium--4{grid-column:7/span 4}.material-grid__offset--medium--6.material-grid__col--medium--5{grid-column:7/span 5}.material-grid__offset--medium--6.material-grid__col--medium--6{grid-column:7/span 6}.material-grid__offset--medium--6.material-grid__col--medium--7{grid-column:7/span 7}.material-grid__offset--medium--6.material-grid__col--medium--8{grid-column:7/span 8}.material-grid__offset--medium--6.material-grid__col--medium--9{grid-column:7/span 9}.material-grid__offset--medium--6.material-grid__col--medium--10{grid-column:7/span 10}.material-grid__offset--medium--6.material-grid__col--medium--11{grid-column:7/span 11}.material-grid__offset--medium--6.material-grid__col--medium--12{grid-column:7/span 12}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6}.material-grid__col--medium--7,.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid__offset--medium--7.material-grid__col--medium--1{grid-column:8/span 1}.material-grid__offset--medium--7.material-grid__col--medium--2{grid-column:8/span 2}.material-grid__offset--medium--7.material-grid__col--medium--3{grid-column:8/span 3}.material-grid__offset--medium--7.material-grid__col--medium--4{grid-column:8/span 4}.material-grid__offset--medium--7.material-grid__col--medium--5{grid-column:8/span 5}.material-grid__offset--medium--7.material-grid__col--medium--6{grid-column:8/span 6}.material-grid__offset--medium--7.material-grid__col--medium--7{grid-column:8/span 7}.material-grid__offset--medium--7.material-grid__col--medium--8{grid-column:8/span 8}.material-grid__offset--medium--7.material-grid__col--medium--9{grid-column:8/span 9}.material-grid__offset--medium--7.material-grid__col--medium--10{grid-column:8/span 10}.material-grid__offset--medium--7.material-grid__col--medium--11{grid-column:8/span 11}.material-grid__offset--medium--7.material-grid__col--medium--12{grid-column:8/span 12}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7}.material-grid__col--medium--8,.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid__offset--medium--8.material-grid__col--medium--1{grid-column:9/span 1}.material-grid__offset--medium--8.material-grid__col--medium--2{grid-column:9/span 2}.material-grid__offset--medium--8.material-grid__col--medium--3{grid-column:9/span 3}.material-grid__offset--medium--8.material-grid__col--medium--4{grid-column:9/span 4}.material-grid__offset--medium--8.material-grid__col--medium--5{grid-column:9/span 5}.material-grid__offset--medium--8.material-grid__col--medium--6{grid-column:9/span 6}.material-grid__offset--medium--8.material-grid__col--medium--7{grid-column:9/span 7}.material-grid__offset--medium--8.material-grid__col--medium--8{grid-column:9/span 8}.material-grid__offset--medium--8.material-grid__col--medium--9{grid-column:9/span 9}.material-grid__offset--medium--8.material-grid__col--medium--10{grid-column:9/span 10}.material-grid__offset--medium--8.material-grid__col--medium--11{grid-column:9/span 11}.material-grid__offset--medium--8.material-grid__col--medium--12{grid-column:9/span 12}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8}.material-grid__col--medium--9,.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid__offset--medium--9.material-grid__col--medium--1{grid-column:10/span 1}.material-grid__offset--medium--9.material-grid__col--medium--2{grid-column:10/span 2}.material-grid__offset--medium--9.material-grid__col--medium--3{grid-column:10/span 3}.material-grid__offset--medium--9.material-grid__col--medium--4{grid-column:10/span 4}.material-grid__offset--medium--9.material-grid__col--medium--5{grid-column:10/span 5}.material-grid__offset--medium--9.material-grid__col--medium--6{grid-column:10/span 6}.material-grid__offset--medium--9.material-grid__col--medium--7{grid-column:10/span 7}.material-grid__offset--medium--9.material-grid__col--medium--8{grid-column:10/span 8}.material-grid__offset--medium--9.material-grid__col--medium--9{grid-column:10/span 9}.material-grid__offset--medium--9.material-grid__col--medium--10{grid-column:10/span 10}.material-grid__offset--medium--9.material-grid__col--medium--11{grid-column:10/span 11}.material-grid__offset--medium--9.material-grid__col--medium--12{grid-column:10/span 12}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9}.material-grid__col--medium--10,.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid__offset--medium--10.material-grid__col--medium--1{grid-column:11/span 1}.material-grid__offset--medium--10.material-grid__col--medium--2{grid-column:11/span 2}.material-grid__offset--medium--10.material-grid__col--medium--3{grid-column:11/span 3}.material-grid__offset--medium--10.material-grid__col--medium--4{grid-column:11/span 4}.material-grid__offset--medium--10.material-grid__col--medium--5{grid-column:11/span 5}.material-grid__offset--medium--10.material-grid__col--medium--6{grid-column:11/span 6}.material-grid__offset--medium--10.material-grid__col--medium--7{grid-column:11/span 7}.material-grid__offset--medium--10.material-grid__col--medium--8{grid-column:11/span 8}.material-grid__offset--medium--10.material-grid__col--medium--9{grid-column:11/span 9}.material-grid__offset--medium--10.material-grid__col--medium--10{grid-column:11/span 10}.material-grid__offset--medium--10.material-grid__col--medium--11{grid-column:11/span 11}.material-grid__offset--medium--10.material-grid__col--medium--12{grid-column:11/span 12}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10}.material-grid__col--medium--11,.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid__offset--medium--11.material-grid__col--medium--1{grid-column:12/span 1}.material-grid__offset--medium--11.material-grid__col--medium--2{grid-column:12/span 2}.material-grid__offset--medium--11.material-grid__col--medium--3{grid-column:12/span 3}.material-grid__offset--medium--11.material-grid__col--medium--4{grid-column:12/span 4}.material-grid__offset--medium--11.material-grid__col--medium--5{grid-column:12/span 5}.material-grid__offset--medium--11.material-grid__col--medium--6{grid-column:12/span 6}.material-grid__offset--medium--11.material-grid__col--medium--7{grid-column:12/span 7}.material-grid__offset--medium--11.material-grid__col--medium--8{grid-column:12/span 8}.material-grid__offset--medium--11.material-grid__col--medium--9{grid-column:12/span 9}.material-grid__offset--medium--11.material-grid__col--medium--10{grid-column:12/span 10}.material-grid__offset--medium--11.material-grid__col--medium--11{grid-column:12/span 11}.material-grid__offset--medium--11.material-grid__col--medium--12{grid-column:12/span 12}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11}.material-grid__col--medium--12,.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid__offset--medium--12.material-grid__col--medium--1{grid-column:13/span 1}.material-grid__offset--medium--12.material-grid__col--medium--2{grid-column:13/span 2}.material-grid__offset--medium--12.material-grid__col--medium--3{grid-column:13/span 3}.material-grid__offset--medium--12.material-grid__col--medium--4{grid-column:13/span 4}.material-grid__offset--medium--12.material-grid__col--medium--5{grid-column:13/span 5}.material-grid__offset--medium--12.material-grid__col--medium--6{grid-column:13/span 6}.material-grid__offset--medium--12.material-grid__col--medium--7{grid-column:13/span 7}.material-grid__offset--medium--12.material-grid__col--medium--8{grid-column:13/span 8}.material-grid__offset--medium--12.material-grid__col--medium--9{grid-column:13/span 9}.material-grid__offset--medium--12.material-grid__col--medium--10{grid-column:13/span 10}.material-grid__offset--medium--12.material-grid__col--medium--11{grid-column:13/span 11}.material-grid__offset--medium--12.material-grid__col--medium--12{grid-column:13/span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file diff --git a/examples/material/css-gridish/material-grid.sketch b/examples/material/css-gridish/material-grid.sketch index 14c9031..7816097 100644 Binary files a/examples/material/css-gridish/material-grid.sketch and b/examples/material/css-gridish/material-grid.sketch differ diff --git a/examples/material/css-gridish/scss/_mixins.scss b/examples/material/css-gridish/scss/_mixins.scss index 0851a57..6ce95f6 100755 --- a/examples/material/css-gridish/scss/_mixins.scss +++ b/examples/material/css-gridish/scss/_mixins.scss @@ -95,6 +95,19 @@ } } + .#{$prefix}-grid__offset--#{$currentName}--#{$i} { + @if $includeFlexFallback { + margin-left: $columnSize; + margin-left: $columnSizeScrollbar; + } + + @for $j from 1 through map-get($currentBreakpoint, columns) { + &.#{$prefix}-grid__col--#{$currentName}--#{$j} { + grid-column: #{$i + 1} / span #{$j}; + } + } + } + .#{$prefix}-grid--fluid-rows > .#{$prefix}-grid__height--#{$currentName}--#{$i} { grid-row: span $i; diff --git a/examples/material/css-gridish/scss/material-grid-legacy.scss b/examples/material/css-gridish/scss/material-grid-legacy.scss index 7f14ce0..dda5c29 100755 --- a/examples/material/css-gridish/scss/material-grid-legacy.scss +++ b/examples/material/css-gridish/scss/material-grid-legacy.scss @@ -7,6 +7,7 @@ $includeFlexFallback: true; min-width: initial; max-width: initial; width: initial; + margin-left: initial; &.#{$prefix}-grid { display: grid; diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 0851a57..6ce95f6 100755 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -95,6 +95,19 @@ } } + .#{$prefix}-grid__offset--#{$currentName}--#{$i} { + @if $includeFlexFallback { + margin-left: $columnSize; + margin-left: $columnSizeScrollbar; + } + + @for $j from 1 through map-get($currentBreakpoint, columns) { + &.#{$prefix}-grid__col--#{$currentName}--#{$j} { + grid-column: #{$i + 1} / span #{$j}; + } + } + } + .#{$prefix}-grid--fluid-rows > .#{$prefix}-grid__height--#{$currentName}--#{$i} { grid-row: span $i; diff --git a/src/scss/gridish-grid-legacy.scss b/src/scss/gridish-grid-legacy.scss index 7f14ce0..dda5c29 100755 --- a/src/scss/gridish-grid-legacy.scss +++ b/src/scss/gridish-grid-legacy.scss @@ -7,6 +7,7 @@ $includeFlexFallback: true; min-width: initial; max-width: initial; width: initial; + margin-left: initial; &.#{$prefix}-grid { display: grid;