From 1b9e123dc9ee264e9d283601fe3cdbb84133d802 Mon Sep 17 00:00:00 2001 From: PABLO ARAGON MORENO Date: Fri, 25 Oct 2019 14:19:38 +0200 Subject: [PATCH 1/3] responsive grid --- src/grd-responsive.css | 111 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 src/grd-responsive.css diff --git a/src/grd-responsive.css b/src/grd-responsive.css new file mode 100644 index 0000000..5c77237 --- /dev/null +++ b/src/grd-responsive.css @@ -0,0 +1,111 @@ +/** + * $sm: 576px; + * $md: 768px; + * $lg: 992px; + * $xl: 1200px; + **/ + +.Grid { display: flex; flex-wrap: wrap; } +.Grid.\-top { align-items: flex-start; } +.Grid.\-middle { align-items: center; } +.Grid.\-bottom { align-items: flex-end; } +.Grid.\-stretch { align-items: stretch; } +.Grid.\-baseline { align-items: baseline; } +.Grid.\-left { justify-content: flex-start; } +.Grid.\-center { justify-content: center; } +.Grid.\-right { justify-content: flex-end; } +.Grid.\-between { justify-content: space-between; } +.Grid.\-around { justify-content: space-around; } + +.Cell { box-sizing: border-box; flex-shrink: 0; } +.Cell.\-fill { width: 0; min-width: 0; flex-grow: 1; } +.Cell.\-1of12 { width: calc(100% * 1 / 12); } +.Cell.\-2of12 { width: calc(100% * 2 / 12); } +.Cell.\-3of12 { width: calc(100% * 3 / 12); } +.Cell.\-4of12 { width: calc(100% * 4 / 12); } +.Cell.\-5of12 { width: calc(100% * 5 / 12); } +.Cell.\-6of12 { width: calc(100% * 6 / 12); } +.Cell.\-7of12 { width: calc(100% * 7 / 12); } +.Cell.\-8of12 { width: calc(100% * 8 / 12); } +.Cell.\-9of12 { width: calc(100% * 9 / 12); } +.Cell.\-10of12 { width: calc(100% * 10 / 12); } +.Cell.\-11of12 { width: calc(100% * 11 / 12); } +.Cell.\-12of12 { width: 100%; } + +.Grid { display: flex; flex-wrap: wrap; justify-content: center; } +.Grid.\-top { align-items: flex-start; } +.Grid.\-middle { align-items: center; } +.Grid.\-bottom { align-items: flex-end; } +.Grid.\-stretch { align-items: stretch; } +.Grid.\-baseline { align-items: baseline; } +.Grid.\-left { justify-content: flex-start; } +.Grid.\-center { justify-content: center; } +.Grid.\-right { justify-content: flex-end; } +.Grid.\-between { justify-content: space-between; } +.Grid.\-around { justify-content: space-around; } + +.Cell { box-sizing: border-box; } + +@media (min-width: 576px) { + .Cell.\-sm-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-sm-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-sm-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-sm-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-sm-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-sm-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-sm-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-sm-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-sm-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-sm-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-sm-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-sm-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-sm-12of12 { width: 100%; } +} + +@media (min-width: 768px) { + .Cell.\-md-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-md-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-md-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-md-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-md-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-md-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-md-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-md-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-md-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-md-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-md-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-md-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-md-12of12 { width: 100%; } +} + +@media (min-width: 992px) { + .Cell.\-lg-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-lg-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-lg-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-lg-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-lg-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-lg-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-lg-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-lg-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-lg-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-lg-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-lg-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-lg-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-lg-12of12 { width: 100%; } +} + +@media (min-width: 1200px) { + .Cell.\-xl-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-xl-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-xl-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-xl-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-xl-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-xl-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-xl-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-xl-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-xl-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-xl-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-xl-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-xl-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-xl-12of12 { width: 100%; } +} From 7ff4812967ab2fe3e21099b82302cd3811e0aa19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20Arag=C3=B3n?= Date: Tue, 7 Jun 2022 12:44:54 +0200 Subject: [PATCH 2/3] feat: responsive classes --- grd.css | 124 ++++++++++++++++++++++++++++++++--------- src/grd-responsive.css | 111 ------------------------------------ 2 files changed, 99 insertions(+), 136 deletions(-) delete mode 100644 src/grd-responsive.css diff --git a/grd.css b/grd.css index 8095f36..8dc45f4 100644 --- a/grd.css +++ b/grd.css @@ -1,26 +1,100 @@ -.Grid { display: flex; flex-wrap: wrap; } -.Grid.\-top { align-items: flex-start; } -.Grid.\-middle { align-items: center; } -.Grid.\-bottom { align-items: flex-end; } -.Grid.\-stretch { align-items: stretch; } -.Grid.\-baseline { align-items: baseline; } -.Grid.\-left { justify-content: flex-start; } -.Grid.\-center { justify-content: center; } -.Grid.\-right { justify-content: flex-end; } -.Grid.\-between { justify-content: space-between; } -.Grid.\-around { justify-content: space-around; } +/** + * $sm: 576px; + * $md: 768px; + * $lg: 992px; + * $xl: 1200px; + **/ -.Cell { box-sizing: border-box; flex-shrink: 0; } -.Cell.\-fill { width: 0; min-width: 0; flex-grow: 1; } -.Cell.\-1of12 { width: calc(100% * 1 / 12); } -.Cell.\-2of12 { width: calc(100% * 2 / 12); } -.Cell.\-3of12 { width: calc(100% * 3 / 12); } -.Cell.\-4of12 { width: calc(100% * 4 / 12); } -.Cell.\-5of12 { width: calc(100% * 5 / 12); } -.Cell.\-6of12 { width: calc(100% * 6 / 12); } -.Cell.\-7of12 { width: calc(100% * 7 / 12); } -.Cell.\-8of12 { width: calc(100% * 8 / 12); } -.Cell.\-9of12 { width: calc(100% * 9 / 12); } -.Cell.\-10of12 { width: calc(100% * 10 / 12); } -.Cell.\-11of12 { width: calc(100% * 11 / 12); } -.Cell.\-12of12 { width: 100%; } + .Grid { display: flex; flex-wrap: wrap; } + .Grid.\-top { align-items: flex-start; } + .Grid.\-middle { align-items: center; } + .Grid.\-bottom { align-items: flex-end; } + .Grid.\-stretch { align-items: stretch; } + .Grid.\-baseline { align-items: baseline; } + .Grid.\-left { justify-content: flex-start; } + .Grid.\-center { justify-content: center; } + .Grid.\-right { justify-content: flex-end; } + .Grid.\-between { justify-content: space-between; } + .Grid.\-around { justify-content: space-around; } + + .Cell { box-sizing: border-box; flex-shrink: 0; } + .Cell.\-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-12of12 { width: 100%; } + + .Cell { box-sizing: border-box; } + + @media (min-width: 576px) { + .Cell.\-sm-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-sm-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-sm-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-sm-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-sm-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-sm-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-sm-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-sm-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-sm-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-sm-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-sm-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-sm-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-sm-12of12 { width: 100%; } + } + + @media (min-width: 768px) { + .Cell.\-md-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-md-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-md-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-md-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-md-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-md-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-md-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-md-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-md-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-md-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-md-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-md-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-md-12of12 { width: 100%; } + } + + @media (min-width: 992px) { + .Cell.\-lg-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-lg-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-lg-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-lg-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-lg-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-lg-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-lg-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-lg-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-lg-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-lg-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-lg-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-lg-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-lg-12of12 { width: 100%; } + } + + @media (min-width: 1200px) { + .Cell.\-xl-fill { width: 0; min-width: 0; flex-grow: 1; } + .Cell.\-xl-1of12 { width: calc(100% * 1 / 12); } + .Cell.\-xl-2of12 { width: calc(100% * 2 / 12); } + .Cell.\-xl-3of12 { width: calc(100% * 3 / 12); } + .Cell.\-xl-4of12 { width: calc(100% * 4 / 12); } + .Cell.\-xl-5of12 { width: calc(100% * 5 / 12); } + .Cell.\-xl-6of12 { width: calc(100% * 6 / 12); } + .Cell.\-xl-7of12 { width: calc(100% * 7 / 12); } + .Cell.\-xl-8of12 { width: calc(100% * 8 / 12); } + .Cell.\-xl-9of12 { width: calc(100% * 9 / 12); } + .Cell.\-xl-10of12 { width: calc(100% * 10 / 12); } + .Cell.\-xl-11of12 { width: calc(100% * 11 / 12); } + .Cell.\-xl-12of12 { width: 100%; } + } + \ No newline at end of file diff --git a/src/grd-responsive.css b/src/grd-responsive.css deleted file mode 100644 index 5c77237..0000000 --- a/src/grd-responsive.css +++ /dev/null @@ -1,111 +0,0 @@ -/** - * $sm: 576px; - * $md: 768px; - * $lg: 992px; - * $xl: 1200px; - **/ - -.Grid { display: flex; flex-wrap: wrap; } -.Grid.\-top { align-items: flex-start; } -.Grid.\-middle { align-items: center; } -.Grid.\-bottom { align-items: flex-end; } -.Grid.\-stretch { align-items: stretch; } -.Grid.\-baseline { align-items: baseline; } -.Grid.\-left { justify-content: flex-start; } -.Grid.\-center { justify-content: center; } -.Grid.\-right { justify-content: flex-end; } -.Grid.\-between { justify-content: space-between; } -.Grid.\-around { justify-content: space-around; } - -.Cell { box-sizing: border-box; flex-shrink: 0; } -.Cell.\-fill { width: 0; min-width: 0; flex-grow: 1; } -.Cell.\-1of12 { width: calc(100% * 1 / 12); } -.Cell.\-2of12 { width: calc(100% * 2 / 12); } -.Cell.\-3of12 { width: calc(100% * 3 / 12); } -.Cell.\-4of12 { width: calc(100% * 4 / 12); } -.Cell.\-5of12 { width: calc(100% * 5 / 12); } -.Cell.\-6of12 { width: calc(100% * 6 / 12); } -.Cell.\-7of12 { width: calc(100% * 7 / 12); } -.Cell.\-8of12 { width: calc(100% * 8 / 12); } -.Cell.\-9of12 { width: calc(100% * 9 / 12); } -.Cell.\-10of12 { width: calc(100% * 10 / 12); } -.Cell.\-11of12 { width: calc(100% * 11 / 12); } -.Cell.\-12of12 { width: 100%; } - -.Grid { display: flex; flex-wrap: wrap; justify-content: center; } -.Grid.\-top { align-items: flex-start; } -.Grid.\-middle { align-items: center; } -.Grid.\-bottom { align-items: flex-end; } -.Grid.\-stretch { align-items: stretch; } -.Grid.\-baseline { align-items: baseline; } -.Grid.\-left { justify-content: flex-start; } -.Grid.\-center { justify-content: center; } -.Grid.\-right { justify-content: flex-end; } -.Grid.\-between { justify-content: space-between; } -.Grid.\-around { justify-content: space-around; } - -.Cell { box-sizing: border-box; } - -@media (min-width: 576px) { - .Cell.\-sm-fill { width: 0; min-width: 0; flex-grow: 1; } - .Cell.\-sm-1of12 { width: calc(100% * 1 / 12); } - .Cell.\-sm-2of12 { width: calc(100% * 2 / 12); } - .Cell.\-sm-3of12 { width: calc(100% * 3 / 12); } - .Cell.\-sm-4of12 { width: calc(100% * 4 / 12); } - .Cell.\-sm-5of12 { width: calc(100% * 5 / 12); } - .Cell.\-sm-6of12 { width: calc(100% * 6 / 12); } - .Cell.\-sm-7of12 { width: calc(100% * 7 / 12); } - .Cell.\-sm-8of12 { width: calc(100% * 8 / 12); } - .Cell.\-sm-9of12 { width: calc(100% * 9 / 12); } - .Cell.\-sm-10of12 { width: calc(100% * 10 / 12); } - .Cell.\-sm-11of12 { width: calc(100% * 11 / 12); } - .Cell.\-sm-12of12 { width: 100%; } -} - -@media (min-width: 768px) { - .Cell.\-md-fill { width: 0; min-width: 0; flex-grow: 1; } - .Cell.\-md-1of12 { width: calc(100% * 1 / 12); } - .Cell.\-md-2of12 { width: calc(100% * 2 / 12); } - .Cell.\-md-3of12 { width: calc(100% * 3 / 12); } - .Cell.\-md-4of12 { width: calc(100% * 4 / 12); } - .Cell.\-md-5of12 { width: calc(100% * 5 / 12); } - .Cell.\-md-6of12 { width: calc(100% * 6 / 12); } - .Cell.\-md-7of12 { width: calc(100% * 7 / 12); } - .Cell.\-md-8of12 { width: calc(100% * 8 / 12); } - .Cell.\-md-9of12 { width: calc(100% * 9 / 12); } - .Cell.\-md-10of12 { width: calc(100% * 10 / 12); } - .Cell.\-md-11of12 { width: calc(100% * 11 / 12); } - .Cell.\-md-12of12 { width: 100%; } -} - -@media (min-width: 992px) { - .Cell.\-lg-fill { width: 0; min-width: 0; flex-grow: 1; } - .Cell.\-lg-1of12 { width: calc(100% * 1 / 12); } - .Cell.\-lg-2of12 { width: calc(100% * 2 / 12); } - .Cell.\-lg-3of12 { width: calc(100% * 3 / 12); } - .Cell.\-lg-4of12 { width: calc(100% * 4 / 12); } - .Cell.\-lg-5of12 { width: calc(100% * 5 / 12); } - .Cell.\-lg-6of12 { width: calc(100% * 6 / 12); } - .Cell.\-lg-7of12 { width: calc(100% * 7 / 12); } - .Cell.\-lg-8of12 { width: calc(100% * 8 / 12); } - .Cell.\-lg-9of12 { width: calc(100% * 9 / 12); } - .Cell.\-lg-10of12 { width: calc(100% * 10 / 12); } - .Cell.\-lg-11of12 { width: calc(100% * 11 / 12); } - .Cell.\-lg-12of12 { width: 100%; } -} - -@media (min-width: 1200px) { - .Cell.\-xl-fill { width: 0; min-width: 0; flex-grow: 1; } - .Cell.\-xl-1of12 { width: calc(100% * 1 / 12); } - .Cell.\-xl-2of12 { width: calc(100% * 2 / 12); } - .Cell.\-xl-3of12 { width: calc(100% * 3 / 12); } - .Cell.\-xl-4of12 { width: calc(100% * 4 / 12); } - .Cell.\-xl-5of12 { width: calc(100% * 5 / 12); } - .Cell.\-xl-6of12 { width: calc(100% * 6 / 12); } - .Cell.\-xl-7of12 { width: calc(100% * 7 / 12); } - .Cell.\-xl-8of12 { width: calc(100% * 8 / 12); } - .Cell.\-xl-9of12 { width: calc(100% * 9 / 12); } - .Cell.\-xl-10of12 { width: calc(100% * 10 / 12); } - .Cell.\-xl-11of12 { width: calc(100% * 11 / 12); } - .Cell.\-xl-12of12 { width: 100%; } -} From 4c2d06c4c662292b74a1bfef3d71fd9f92e2f4c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20Arag=C3=B3n?= Date: Tue, 7 Jun 2022 12:46:48 +0200 Subject: [PATCH 3/3] chore: build latest changes --- grd.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/grd.min.css b/grd.min.css index fc753a3..18442e2 100644 --- a/grd.min.css +++ b/grd.min.css @@ -1 +1 @@ -.Grid{display:flex;flex-wrap:wrap}.Grid.\-top{align-items:flex-start}.Grid.\-middle{align-items:center}.Grid.\-bottom{align-items:flex-end}.Grid.\-stretch{align-items:stretch}.Grid.\-baseline{align-items:baseline}.Grid.\-left{justify-content:flex-start}.Grid.\-center{justify-content:center}.Grid.\-right{justify-content:flex-end}.Grid.\-between{justify-content:space-between}.Grid.\-around{justify-content:space-around}.Cell{box-sizing:border-box;flex-shrink:0}.Cell.\-fill{flex-grow:1;min-width:0;width:0}.Cell.\-1of12{width:8.33333%}.Cell.\-2of12{width:16.66667%}.Cell.\-3of12{width:25%}.Cell.\-4of12{width:33.33333%}.Cell.\-5of12{width:41.66667%}.Cell.\-6of12{width:50%}.Cell.\-7of12{width:58.33333%}.Cell.\-8of12{width:66.66667%}.Cell.\-9of12{width:75%}.Cell.\-10of12{width:83.33333%}.Cell.\-11of12{width:91.66667%}.Cell.\-12of12{width:100%} \ No newline at end of file +.Grid{display:flex;flex-wrap:wrap}.Grid.\-top{align-items:flex-start}.Grid.\-middle{align-items:center}.Grid.\-bottom{align-items:flex-end}.Grid.\-stretch{align-items:stretch}.Grid.\-baseline{align-items:baseline}.Grid.\-left{justify-content:flex-start}.Grid.\-center{justify-content:center}.Grid.\-right{justify-content:flex-end}.Grid.\-between{justify-content:space-between}.Grid.\-around{justify-content:space-around}.Cell{flex-shrink:0}.Cell.\-fill{flex-grow:1;min-width:0;width:0}.Cell.\-1of12{width:8.33333%}.Cell.\-2of12{width:16.66667%}.Cell.\-3of12{width:25%}.Cell.\-4of12{width:33.33333%}.Cell.\-5of12{width:41.66667%}.Cell.\-6of12{width:50%}.Cell.\-7of12{width:58.33333%}.Cell.\-8of12{width:66.66667%}.Cell.\-9of12{width:75%}.Cell.\-10of12{width:83.33333%}.Cell.\-11of12{width:91.66667%}.Cell.\-12of12{width:100%}.Cell{box-sizing:border-box}@media (min-width:576px){.Cell.\-sm-fill{flex-grow:1;min-width:0;width:0}.Cell.\-sm-1of12{width:8.33333%}.Cell.\-sm-2of12{width:16.66667%}.Cell.\-sm-3of12{width:25%}.Cell.\-sm-4of12{width:33.33333%}.Cell.\-sm-5of12{width:41.66667%}.Cell.\-sm-6of12{width:50%}.Cell.\-sm-7of12{width:58.33333%}.Cell.\-sm-8of12{width:66.66667%}.Cell.\-sm-9of12{width:75%}.Cell.\-sm-10of12{width:83.33333%}.Cell.\-sm-11of12{width:91.66667%}.Cell.\-sm-12of12{width:100%}}@media (min-width:768px){.Cell.\-md-fill{flex-grow:1;min-width:0;width:0}.Cell.\-md-1of12{width:8.33333%}.Cell.\-md-2of12{width:16.66667%}.Cell.\-md-3of12{width:25%}.Cell.\-md-4of12{width:33.33333%}.Cell.\-md-5of12{width:41.66667%}.Cell.\-md-6of12{width:50%}.Cell.\-md-7of12{width:58.33333%}.Cell.\-md-8of12{width:66.66667%}.Cell.\-md-9of12{width:75%}.Cell.\-md-10of12{width:83.33333%}.Cell.\-md-11of12{width:91.66667%}.Cell.\-md-12of12{width:100%}}@media (min-width:992px){.Cell.\-lg-fill{flex-grow:1;min-width:0;width:0}.Cell.\-lg-1of12{width:8.33333%}.Cell.\-lg-2of12{width:16.66667%}.Cell.\-lg-3of12{width:25%}.Cell.\-lg-4of12{width:33.33333%}.Cell.\-lg-5of12{width:41.66667%}.Cell.\-lg-6of12{width:50%}.Cell.\-lg-7of12{width:58.33333%}.Cell.\-lg-8of12{width:66.66667%}.Cell.\-lg-9of12{width:75%}.Cell.\-lg-10of12{width:83.33333%}.Cell.\-lg-11of12{width:91.66667%}.Cell.\-lg-12of12{width:100%}}@media (min-width:1200px){.Cell.\-xl-fill{flex-grow:1;min-width:0;width:0}.Cell.\-xl-1of12{width:8.33333%}.Cell.\-xl-2of12{width:16.66667%}.Cell.\-xl-3of12{width:25%}.Cell.\-xl-4of12{width:33.33333%}.Cell.\-xl-5of12{width:41.66667%}.Cell.\-xl-6of12{width:50%}.Cell.\-xl-7of12{width:58.33333%}.Cell.\-xl-8of12{width:66.66667%}.Cell.\-xl-9of12{width:75%}.Cell.\-xl-10of12{width:83.33333%}.Cell.\-xl-11of12{width:91.66667%}.Cell.\-xl-12of12{width:100%}} \ No newline at end of file