From a28b43a8abe196eaeb0bda74ee3de5cf1a7a6035 Mon Sep 17 00:00:00 2001 From: Boris Damevin Date: Tue, 14 Jun 2022 11:01:29 +0200 Subject: [PATCH] feat: add `$screens` option --- README.md | 20 +- package-lock.json | 46 +- package.json | 2 +- src/_config.scss | 11 + src/_mixins.scss | 9 +- src/_variables.scss | 2 + styles.scss | 2 +- tests/{test.spec.scss => extend.spec.scss} | 13 +- tests/mixins.spec.scss | 2956 ++++++++++++++++++++ 9 files changed, 3018 insertions(+), 43 deletions(-) create mode 100644 src/_config.scss rename tests/{test.spec.scss => extend.spec.scss} (99%) create mode 100644 tests/mixins.spec.scss diff --git a/README.md b/README.md index 2355340..75c5130 100644 --- a/README.md +++ b/README.md @@ -22,21 +22,23 @@ npm install @unsass/grid @use "@unsass/grid/styles"; ``` -> This will generate the default grid styles. - ### Configuration ```scss @use "@unsass/grid" with ( - $columns: 10 + $columns: 10, + $screens: ( + "lg": 1024px + ) ); ``` ### Options -| Name | Default | Description | -|---------------|---------|--------------------------| -| `$columns` | `12` | Sets numbers of columns. | -| `$column-gap` | `12px` | Sets the column gap. | -| `$rows` | `6` | Sets numbers of rows. | -| `$rows-gap` | `12px` | Sets the row gap. | +| Name | Default | Description | +|---------------|---------|-----------------------------------------------------------------------------------------------------| +| `$columns` | `12` | Sets numbers of columns. | +| `$column-gap` | `12px` | Sets the column gap. | +| `$rows` | `6` | Sets numbers of rows. | +| `$rows-gap` | `12px` | Sets the row gap. | +| `$screens` | `()` | Sets breakpoints rules. See here for [default tokens](https://github.com/unsass/breakpoint#tokens). | diff --git a/package-lock.json b/package-lock.json index 22ec271..1449b63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "1.0.1", "license": "MIT", "dependencies": { - "@sass-collective/breakpoint": "^2.4.1", "@sass-collective/css": "^3.0.0", + "@unsass/breakpoint": "^2.0.0", "sass": "^1.52.3" }, "devDependencies": { @@ -1484,19 +1484,6 @@ "@octokit/openapi-types": "^11.2.0" } }, - "node_modules/@sass-collective/breakpoint": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@sass-collective/breakpoint/-/breakpoint-2.4.1.tgz", - "integrity": "sha512-XILqXGRzTUcn/ctPziLFWSa3rIT5XseBFB1WFoluDAJyHN8T5SZO0W1HjbJs0LK3t4uWg7LlBoTj8b+by98FTA==", - "dependencies": { - "@sass-collective/strip-unit": "^3.1.2", - "sass": "^1.45.2" - }, - "engines": { - "node": ">=12.0.0", - "npm": ">=7.0.0" - } - }, "node_modules/@sass-collective/css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@sass-collective/css/-/css-3.0.0.tgz", @@ -1901,6 +1888,19 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "node_modules/@unsass/breakpoint": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@unsass/breakpoint/-/breakpoint-2.0.0.tgz", + "integrity": "sha512-GXXAC4SBxDOaaUJsjUga0hyV14PueIhLJzoRByN5d/bpJOUyCWHaqp3IX5iK74rgCwibFuUxmDQbcxhOsAKR3g==", + "dependencies": { + "@sass-collective/strip-unit": "^3.1.2", + "sass": "^1.52.3" + }, + "engines": { + "node": ">=14.0.0", + "npm": ">=8.0.0" + } + }, "node_modules/acorn": { "version": "8.7.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", @@ -12168,15 +12168,6 @@ "@octokit/openapi-types": "^11.2.0" } }, - "@sass-collective/breakpoint": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@sass-collective/breakpoint/-/breakpoint-2.4.1.tgz", - "integrity": "sha512-XILqXGRzTUcn/ctPziLFWSa3rIT5XseBFB1WFoluDAJyHN8T5SZO0W1HjbJs0LK3t4uWg7LlBoTj8b+by98FTA==", - "requires": { - "@sass-collective/strip-unit": "^3.1.2", - "sass": "^1.45.2" - } - }, "@sass-collective/css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@sass-collective/css/-/css-3.0.0.tgz", @@ -12529,6 +12520,15 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "@unsass/breakpoint": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@unsass/breakpoint/-/breakpoint-2.0.0.tgz", + "integrity": "sha512-GXXAC4SBxDOaaUJsjUga0hyV14PueIhLJzoRByN5d/bpJOUyCWHaqp3IX5iK74rgCwibFuUxmDQbcxhOsAKR3g==", + "requires": { + "@sass-collective/strip-unit": "^3.1.2", + "sass": "^1.52.3" + } + }, "acorn": { "version": "8.7.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", diff --git a/package.json b/package.json index f744bd6..439f278 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "stylelint-config-unsass": "^1.0.0" }, "dependencies": { - "@sass-collective/breakpoint": "^2.4.1", "@sass-collective/css": "^3.0.0", + "@unsass/breakpoint": "^2.0.0", "sass": "^1.52.3" }, "keywords": [ diff --git a/src/_config.scss b/src/_config.scss new file mode 100644 index 0000000..2b75c55 --- /dev/null +++ b/src/_config.scss @@ -0,0 +1,11 @@ +// ============================================================================================= // +// CONFIGURATION // +// ============================================================================================= // + +@use "@unsass/breakpoint"; +@use "./variables"; + +/// +/// @see {mixin} breakpoint.config +/// +@include breakpoint.config(variables.$screens); diff --git a/src/_mixins.scss b/src/_mixins.scss index c5096ad..a29f160 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -3,8 +3,9 @@ // ============================================================================================= // @use "sass:meta"; -@use "@sass-collective/breakpoint"; @use "@sass-collective/css"; +@use "@unsass/breakpoint"; +@use "./config"; @use "./variables"; @mixin core-styles { @@ -74,7 +75,7 @@ // Breakpoint // --------------------------------- // - @each $key, $value in breakpoint.$screens { + @each $key, $value in breakpoint.$extend { @include breakpoint.up($key) { @at-root { @include css.selector(".grid-flow-col", $key) { @@ -149,7 +150,7 @@ // Breakpoint // --------------------------------- // - @each $key, $value in breakpoint.$screens { + @each $key, $value in breakpoint.$extend { @include breakpoint.up($key) { @at-root { @include css.selector(".col-auto", $key) { @@ -230,7 +231,7 @@ // Breakpoint // --------------------------------- // - @each $key, $value in breakpoint.$screens { + @each $key, $value in breakpoint.$extend { @include breakpoint.up($key) { @at-root { @include css.selector(".row-auto", $key) { diff --git a/src/_variables.scss b/src/_variables.scss index 73facf0..ece3a43 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -6,3 +6,5 @@ $columns: 12 !default; $column-gap: 12px !default; $rows: 6 !default; $row-gap: 12px !default; + +$screens: () !default; diff --git a/styles.scss b/styles.scss index dcb0601..bac8abb 100644 --- a/styles.scss +++ b/styles.scss @@ -2,6 +2,6 @@ // STYLES // // ============================================================================================= // -@use "./mixins"; +@use "./src/mixins"; @include mixins.core-styles; diff --git a/tests/test.spec.scss b/tests/extend.spec.scss similarity index 99% rename from tests/test.spec.scss rename to tests/extend.spec.scss index d38a46e..f42d92f 100644 --- a/tests/test.spec.scss +++ b/tests/extend.spec.scss @@ -5,11 +5,14 @@ @use "true" as *; @use "../index" as grid with ( $columns: 2, - $rows: 2 + $rows: 2, + $screens: ( + "lg": 1024px + ) ); @include describe("grid.core-styles()") { - @include it("Should return core styles.") { + @include it("Should return extended grid declarations.") { @include assert { @include output(false) { @include grid.core-styles; @@ -156,7 +159,7 @@ } } - @media (min-width: 960px) { + @media (min-width: 1024px) { .lg\:grid-flow-col { grid-auto-flow: column; } @@ -458,7 +461,7 @@ } } - @media (min-width: 960px) { + @media (min-width: 1024px) { .lg\:col-auto { grid-column: auto; } @@ -808,7 +811,7 @@ } } - @media (min-width: 960px) { + @media (min-width: 1024px) { .lg\:row-auto { grid-row: auto; } diff --git a/tests/mixins.spec.scss b/tests/mixins.spec.scss new file mode 100644 index 0000000..76d8faf --- /dev/null +++ b/tests/mixins.spec.scss @@ -0,0 +1,2956 @@ +// ============================================================================================= // +// TEST // +// ============================================================================================= // + +@use "true" as *; +@use "../index" as grid; + +@include describe("grid.core-styles()") { + @include it("Should return all grid declarations.") { + @include assert { + @include output(false) { + @include grid.core-styles; + } + + @include expect(false) { + .grid { + display: grid; + column-gap: 12px; + row-gap: 12px; + } + + .grid-flow-col { + grid-auto-flow: column; + } + + .grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .grid-flow-row { + grid-auto-flow: row; + } + + .grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + + @media (min-width: 320px) { + .xs\:grid-flow-col { + grid-auto-flow: column; + } + + .xs\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .xs\:grid-flow-row { + grid-auto-flow: row; + } + + .xs\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .xs\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .xs\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .xs\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xs\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .xs\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .xs\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .xs\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .xs\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .xs\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .xs\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .xs\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .xs\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .xs\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .xs\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .xs\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .xs\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .xs\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .xs\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + @media (min-width: 480px) { + .sm\:grid-flow-col { + grid-auto-flow: column; + } + + .sm\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .sm\:grid-flow-row { + grid-auto-flow: row; + } + + .sm\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sm\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .sm\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .sm\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .sm\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .sm\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .sm\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .sm\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .sm\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .sm\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .sm\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .sm\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .sm\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .sm\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + @media (min-width: 768px) { + .md\:grid-flow-col { + grid-auto-flow: column; + } + + .md\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .md\:grid-flow-row { + grid-auto-flow: row; + } + + .md\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .md\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .md\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .md\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .md\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .md\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .md\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .md\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .md\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .md\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .md\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .md\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .md\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + @media (min-width: 960px) { + .lg\:grid-flow-col { + grid-auto-flow: column; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .lg\:grid-flow-row { + grid-auto-flow: row; + } + + .lg\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .lg\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .lg\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .lg\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .lg\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .lg\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .lg\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .lg\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .lg\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + @media (min-width: 1200px) { + .xl\:grid-flow-col { + grid-auto-flow: column; + } + + .xl\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .xl\:grid-flow-row { + grid-auto-flow: row; + } + + .xl\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .xl\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .xl\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .xl\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .xl\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .xl\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .xl\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .xl\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .xl\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .xl\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .xl\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .xl\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .xl\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .xl\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .xl\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .xl\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + @media (min-width: 1400px) { + .\32 xl\:grid-flow-col { + grid-auto-flow: column; + } + + .\32 xl\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .\32 xl\:grid-flow-row { + grid-auto-flow: row; + } + + .\32 xl\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .\32 xl\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .\32 xl\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-2 { + grid-template-rows: repeat(2, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-5 { + grid-template-rows: repeat(5, minmax(0, 1fr)); + } + + .\32 xl\:grid-rows-6 { + grid-template-rows: repeat(6, minmax(0, 1fr)); + } + } + + .col-auto { + grid-column: auto; + } + + .col-span-1 { + grid-column: span 1/span 1; + } + + .col-span-2 { + grid-column: span 2/span 2; + } + + .col-span-3 { + grid-column: span 3/span 3; + } + + .col-span-4 { + grid-column: span 4/span 4; + } + + .col-span-5 { + grid-column: span 5/span 5; + } + + .col-span-6 { + grid-column: span 6/span 6; + } + + .col-span-7 { + grid-column: span 7/span 7; + } + + .col-span-8 { + grid-column: span 8/span 8; + } + + .col-span-9 { + grid-column: span 9/span 9; + } + + .col-span-10 { + grid-column: span 10/span 10; + } + + .col-span-11 { + grid-column: span 11/span 11; + } + + .col-span-12 { + grid-column: span 12/span 12; + } + + .col-span-full { + grid-column: 1/-1; + } + + .col-start-1 { + grid-column-start: 1; + } + + .col-start-2 { + grid-column-start: 2; + } + + .col-start-3 { + grid-column-start: 3; + } + + .col-start-4 { + grid-column-start: 4; + } + + .col-start-5 { + grid-column-start: 5; + } + + .col-start-6 { + grid-column-start: 6; + } + + .col-start-7 { + grid-column-start: 7; + } + + .col-start-8 { + grid-column-start: 8; + } + + .col-start-9 { + grid-column-start: 9; + } + + .col-start-10 { + grid-column-start: 10; + } + + .col-start-11 { + grid-column-start: 11; + } + + .col-start-12 { + grid-column-start: 12; + } + + .col-start-13 { + grid-column-start: 13; + } + + .col-start-auto { + grid-column-start: auto; + } + + .col-end-1 { + grid-column-end: 1; + } + + .col-end-2 { + grid-column-end: 2; + } + + .col-end-3 { + grid-column-end: 3; + } + + .col-end-4 { + grid-column-end: 4; + } + + .col-end-5 { + grid-column-end: 5; + } + + .col-end-6 { + grid-column-end: 6; + } + + .col-end-7 { + grid-column-end: 7; + } + + .col-end-8 { + grid-column-end: 8; + } + + .col-end-9 { + grid-column-end: 9; + } + + .col-end-10 { + grid-column-end: 10; + } + + .col-end-11 { + grid-column-end: 11; + } + + .col-end-12 { + grid-column-end: 12; + } + + .col-end-13 { + grid-column-end: 13; + } + + .col-end-auto { + grid-column-end: auto; + } + + @media (min-width: 320px) { + .xs\:col-auto { + grid-column: auto; + } + + .xs\:col-span-1 { + grid-column: span 1/span 1; + } + + .xs\:col-span-2 { + grid-column: span 2/span 2; + } + + .xs\:col-span-3 { + grid-column: span 3/span 3; + } + + .xs\:col-span-4 { + grid-column: span 4/span 4; + } + + .xs\:col-span-5 { + grid-column: span 5/span 5; + } + + .xs\:col-span-6 { + grid-column: span 6/span 6; + } + + .xs\:col-span-7 { + grid-column: span 7/span 7; + } + + .xs\:col-span-8 { + grid-column: span 8/span 8; + } + + .xs\:col-span-9 { + grid-column: span 9/span 9; + } + + .xs\:col-span-10 { + grid-column: span 10/span 10; + } + + .xs\:col-span-11 { + grid-column: span 11/span 11; + } + + .xs\:col-span-12 { + grid-column: span 12/span 12; + } + + .xs\:col-span-full { + grid-column: 1/-1; + } + + .xs\:col-start-1 { + grid-column-start: 1; + } + + .xs\:col-start-2 { + grid-column-start: 2; + } + + .xs\:col-start-3 { + grid-column-start: 3; + } + + .xs\:col-start-4 { + grid-column-start: 4; + } + + .xs\:col-start-5 { + grid-column-start: 5; + } + + .xs\:col-start-6 { + grid-column-start: 6; + } + + .xs\:col-start-7 { + grid-column-start: 7; + } + + .xs\:col-start-8 { + grid-column-start: 8; + } + + .xs\:col-start-9 { + grid-column-start: 9; + } + + .xs\:col-start-10 { + grid-column-start: 10; + } + + .xs\:col-start-11 { + grid-column-start: 11; + } + + .xs\:col-start-12 { + grid-column-start: 12; + } + + .xs\:col-start-13 { + grid-column-start: 13; + } + + .xs\:col-start-auto { + grid-column-start: auto; + } + + .xs\:col-end-1 { + grid-column-end: 1; + } + + .xs\:col-end-2 { + grid-column-end: 2; + } + + .xs\:col-end-3 { + grid-column-end: 3; + } + + .xs\:col-end-4 { + grid-column-end: 4; + } + + .xs\:col-end-5 { + grid-column-end: 5; + } + + .xs\:col-end-6 { + grid-column-end: 6; + } + + .xs\:col-end-7 { + grid-column-end: 7; + } + + .xs\:col-end-8 { + grid-column-end: 8; + } + + .xs\:col-end-9 { + grid-column-end: 9; + } + + .xs\:col-end-10 { + grid-column-end: 10; + } + + .xs\:col-end-11 { + grid-column-end: 11; + } + + .xs\:col-end-12 { + grid-column-end: 12; + } + + .xs\:col-end-13 { + grid-column-end: 13; + } + + .xs\:col-end-auto { + grid-column-end: auto; + } + } + + @media (min-width: 480px) { + .sm\:col-auto { + grid-column: auto; + } + + .sm\:col-span-1 { + grid-column: span 1/span 1; + } + + .sm\:col-span-2 { + grid-column: span 2/span 2; + } + + .sm\:col-span-3 { + grid-column: span 3/span 3; + } + + .sm\:col-span-4 { + grid-column: span 4/span 4; + } + + .sm\:col-span-5 { + grid-column: span 5/span 5; + } + + .sm\:col-span-6 { + grid-column: span 6/span 6; + } + + .sm\:col-span-7 { + grid-column: span 7/span 7; + } + + .sm\:col-span-8 { + grid-column: span 8/span 8; + } + + .sm\:col-span-9 { + grid-column: span 9/span 9; + } + + .sm\:col-span-10 { + grid-column: span 10/span 10; + } + + .sm\:col-span-11 { + grid-column: span 11/span 11; + } + + .sm\:col-span-12 { + grid-column: span 12/span 12; + } + + .sm\:col-span-full { + grid-column: 1/-1; + } + + .sm\:col-start-1 { + grid-column-start: 1; + } + + .sm\:col-start-2 { + grid-column-start: 2; + } + + .sm\:col-start-3 { + grid-column-start: 3; + } + + .sm\:col-start-4 { + grid-column-start: 4; + } + + .sm\:col-start-5 { + grid-column-start: 5; + } + + .sm\:col-start-6 { + grid-column-start: 6; + } + + .sm\:col-start-7 { + grid-column-start: 7; + } + + .sm\:col-start-8 { + grid-column-start: 8; + } + + .sm\:col-start-9 { + grid-column-start: 9; + } + + .sm\:col-start-10 { + grid-column-start: 10; + } + + .sm\:col-start-11 { + grid-column-start: 11; + } + + .sm\:col-start-12 { + grid-column-start: 12; + } + + .sm\:col-start-13 { + grid-column-start: 13; + } + + .sm\:col-start-auto { + grid-column-start: auto; + } + + .sm\:col-end-1 { + grid-column-end: 1; + } + + .sm\:col-end-2 { + grid-column-end: 2; + } + + .sm\:col-end-3 { + grid-column-end: 3; + } + + .sm\:col-end-4 { + grid-column-end: 4; + } + + .sm\:col-end-5 { + grid-column-end: 5; + } + + .sm\:col-end-6 { + grid-column-end: 6; + } + + .sm\:col-end-7 { + grid-column-end: 7; + } + + .sm\:col-end-8 { + grid-column-end: 8; + } + + .sm\:col-end-9 { + grid-column-end: 9; + } + + .sm\:col-end-10 { + grid-column-end: 10; + } + + .sm\:col-end-11 { + grid-column-end: 11; + } + + .sm\:col-end-12 { + grid-column-end: 12; + } + + .sm\:col-end-13 { + grid-column-end: 13; + } + + .sm\:col-end-auto { + grid-column-end: auto; + } + } + + @media (min-width: 768px) { + .md\:col-auto { + grid-column: auto; + } + + .md\:col-span-1 { + grid-column: span 1/span 1; + } + + .md\:col-span-2 { + grid-column: span 2/span 2; + } + + .md\:col-span-3 { + grid-column: span 3/span 3; + } + + .md\:col-span-4 { + grid-column: span 4/span 4; + } + + .md\:col-span-5 { + grid-column: span 5/span 5; + } + + .md\:col-span-6 { + grid-column: span 6/span 6; + } + + .md\:col-span-7 { + grid-column: span 7/span 7; + } + + .md\:col-span-8 { + grid-column: span 8/span 8; + } + + .md\:col-span-9 { + grid-column: span 9/span 9; + } + + .md\:col-span-10 { + grid-column: span 10/span 10; + } + + .md\:col-span-11 { + grid-column: span 11/span 11; + } + + .md\:col-span-12 { + grid-column: span 12/span 12; + } + + .md\:col-span-full { + grid-column: 1/-1; + } + + .md\:col-start-1 { + grid-column-start: 1; + } + + .md\:col-start-2 { + grid-column-start: 2; + } + + .md\:col-start-3 { + grid-column-start: 3; + } + + .md\:col-start-4 { + grid-column-start: 4; + } + + .md\:col-start-5 { + grid-column-start: 5; + } + + .md\:col-start-6 { + grid-column-start: 6; + } + + .md\:col-start-7 { + grid-column-start: 7; + } + + .md\:col-start-8 { + grid-column-start: 8; + } + + .md\:col-start-9 { + grid-column-start: 9; + } + + .md\:col-start-10 { + grid-column-start: 10; + } + + .md\:col-start-11 { + grid-column-start: 11; + } + + .md\:col-start-12 { + grid-column-start: 12; + } + + .md\:col-start-13 { + grid-column-start: 13; + } + + .md\:col-start-auto { + grid-column-start: auto; + } + + .md\:col-end-1 { + grid-column-end: 1; + } + + .md\:col-end-2 { + grid-column-end: 2; + } + + .md\:col-end-3 { + grid-column-end: 3; + } + + .md\:col-end-4 { + grid-column-end: 4; + } + + .md\:col-end-5 { + grid-column-end: 5; + } + + .md\:col-end-6 { + grid-column-end: 6; + } + + .md\:col-end-7 { + grid-column-end: 7; + } + + .md\:col-end-8 { + grid-column-end: 8; + } + + .md\:col-end-9 { + grid-column-end: 9; + } + + .md\:col-end-10 { + grid-column-end: 10; + } + + .md\:col-end-11 { + grid-column-end: 11; + } + + .md\:col-end-12 { + grid-column-end: 12; + } + + .md\:col-end-13 { + grid-column-end: 13; + } + + .md\:col-end-auto { + grid-column-end: auto; + } + } + + @media (min-width: 960px) { + .lg\:col-auto { + grid-column: auto; + } + + .lg\:col-span-1 { + grid-column: span 1/span 1; + } + + .lg\:col-span-2 { + grid-column: span 2/span 2; + } + + .lg\:col-span-3 { + grid-column: span 3/span 3; + } + + .lg\:col-span-4 { + grid-column: span 4/span 4; + } + + .lg\:col-span-5 { + grid-column: span 5/span 5; + } + + .lg\:col-span-6 { + grid-column: span 6/span 6; + } + + .lg\:col-span-7 { + grid-column: span 7/span 7; + } + + .lg\:col-span-8 { + grid-column: span 8/span 8; + } + + .lg\:col-span-9 { + grid-column: span 9/span 9; + } + + .lg\:col-span-10 { + grid-column: span 10/span 10; + } + + .lg\:col-span-11 { + grid-column: span 11/span 11; + } + + .lg\:col-span-12 { + grid-column: span 12/span 12; + } + + .lg\:col-span-full { + grid-column: 1/-1; + } + + .lg\:col-start-1 { + grid-column-start: 1; + } + + .lg\:col-start-2 { + grid-column-start: 2; + } + + .lg\:col-start-3 { + grid-column-start: 3; + } + + .lg\:col-start-4 { + grid-column-start: 4; + } + + .lg\:col-start-5 { + grid-column-start: 5; + } + + .lg\:col-start-6 { + grid-column-start: 6; + } + + .lg\:col-start-7 { + grid-column-start: 7; + } + + .lg\:col-start-8 { + grid-column-start: 8; + } + + .lg\:col-start-9 { + grid-column-start: 9; + } + + .lg\:col-start-10 { + grid-column-start: 10; + } + + .lg\:col-start-11 { + grid-column-start: 11; + } + + .lg\:col-start-12 { + grid-column-start: 12; + } + + .lg\:col-start-13 { + grid-column-start: 13; + } + + .lg\:col-start-auto { + grid-column-start: auto; + } + + .lg\:col-end-1 { + grid-column-end: 1; + } + + .lg\:col-end-2 { + grid-column-end: 2; + } + + .lg\:col-end-3 { + grid-column-end: 3; + } + + .lg\:col-end-4 { + grid-column-end: 4; + } + + .lg\:col-end-5 { + grid-column-end: 5; + } + + .lg\:col-end-6 { + grid-column-end: 6; + } + + .lg\:col-end-7 { + grid-column-end: 7; + } + + .lg\:col-end-8 { + grid-column-end: 8; + } + + .lg\:col-end-9 { + grid-column-end: 9; + } + + .lg\:col-end-10 { + grid-column-end: 10; + } + + .lg\:col-end-11 { + grid-column-end: 11; + } + + .lg\:col-end-12 { + grid-column-end: 12; + } + + .lg\:col-end-13 { + grid-column-end: 13; + } + + .lg\:col-end-auto { + grid-column-end: auto; + } + } + + @media (min-width: 1200px) { + .xl\:col-auto { + grid-column: auto; + } + + .xl\:col-span-1 { + grid-column: span 1/span 1; + } + + .xl\:col-span-2 { + grid-column: span 2/span 2; + } + + .xl\:col-span-3 { + grid-column: span 3/span 3; + } + + .xl\:col-span-4 { + grid-column: span 4/span 4; + } + + .xl\:col-span-5 { + grid-column: span 5/span 5; + } + + .xl\:col-span-6 { + grid-column: span 6/span 6; + } + + .xl\:col-span-7 { + grid-column: span 7/span 7; + } + + .xl\:col-span-8 { + grid-column: span 8/span 8; + } + + .xl\:col-span-9 { + grid-column: span 9/span 9; + } + + .xl\:col-span-10 { + grid-column: span 10/span 10; + } + + .xl\:col-span-11 { + grid-column: span 11/span 11; + } + + .xl\:col-span-12 { + grid-column: span 12/span 12; + } + + .xl\:col-span-full { + grid-column: 1/-1; + } + + .xl\:col-start-1 { + grid-column-start: 1; + } + + .xl\:col-start-2 { + grid-column-start: 2; + } + + .xl\:col-start-3 { + grid-column-start: 3; + } + + .xl\:col-start-4 { + grid-column-start: 4; + } + + .xl\:col-start-5 { + grid-column-start: 5; + } + + .xl\:col-start-6 { + grid-column-start: 6; + } + + .xl\:col-start-7 { + grid-column-start: 7; + } + + .xl\:col-start-8 { + grid-column-start: 8; + } + + .xl\:col-start-9 { + grid-column-start: 9; + } + + .xl\:col-start-10 { + grid-column-start: 10; + } + + .xl\:col-start-11 { + grid-column-start: 11; + } + + .xl\:col-start-12 { + grid-column-start: 12; + } + + .xl\:col-start-13 { + grid-column-start: 13; + } + + .xl\:col-start-auto { + grid-column-start: auto; + } + + .xl\:col-end-1 { + grid-column-end: 1; + } + + .xl\:col-end-2 { + grid-column-end: 2; + } + + .xl\:col-end-3 { + grid-column-end: 3; + } + + .xl\:col-end-4 { + grid-column-end: 4; + } + + .xl\:col-end-5 { + grid-column-end: 5; + } + + .xl\:col-end-6 { + grid-column-end: 6; + } + + .xl\:col-end-7 { + grid-column-end: 7; + } + + .xl\:col-end-8 { + grid-column-end: 8; + } + + .xl\:col-end-9 { + grid-column-end: 9; + } + + .xl\:col-end-10 { + grid-column-end: 10; + } + + .xl\:col-end-11 { + grid-column-end: 11; + } + + .xl\:col-end-12 { + grid-column-end: 12; + } + + .xl\:col-end-13 { + grid-column-end: 13; + } + + .xl\:col-end-auto { + grid-column-end: auto; + } + } + + @media (min-width: 1400px) { + .\32 xl\:col-auto { + grid-column: auto; + } + + .\32 xl\:col-span-1 { + grid-column: span 1/span 1; + } + + .\32 xl\:col-span-2 { + grid-column: span 2/span 2; + } + + .\32 xl\:col-span-3 { + grid-column: span 3/span 3; + } + + .\32 xl\:col-span-4 { + grid-column: span 4/span 4; + } + + .\32 xl\:col-span-5 { + grid-column: span 5/span 5; + } + + .\32 xl\:col-span-6 { + grid-column: span 6/span 6; + } + + .\32 xl\:col-span-7 { + grid-column: span 7/span 7; + } + + .\32 xl\:col-span-8 { + grid-column: span 8/span 8; + } + + .\32 xl\:col-span-9 { + grid-column: span 9/span 9; + } + + .\32 xl\:col-span-10 { + grid-column: span 10/span 10; + } + + .\32 xl\:col-span-11 { + grid-column: span 11/span 11; + } + + .\32 xl\:col-span-12 { + grid-column: span 12/span 12; + } + + .\32 xl\:col-span-full { + grid-column: 1/-1; + } + + .\32 xl\:col-start-1 { + grid-column-start: 1; + } + + .\32 xl\:col-start-2 { + grid-column-start: 2; + } + + .\32 xl\:col-start-3 { + grid-column-start: 3; + } + + .\32 xl\:col-start-4 { + grid-column-start: 4; + } + + .\32 xl\:col-start-5 { + grid-column-start: 5; + } + + .\32 xl\:col-start-6 { + grid-column-start: 6; + } + + .\32 xl\:col-start-7 { + grid-column-start: 7; + } + + .\32 xl\:col-start-8 { + grid-column-start: 8; + } + + .\32 xl\:col-start-9 { + grid-column-start: 9; + } + + .\32 xl\:col-start-10 { + grid-column-start: 10; + } + + .\32 xl\:col-start-11 { + grid-column-start: 11; + } + + .\32 xl\:col-start-12 { + grid-column-start: 12; + } + + .\32 xl\:col-start-13 { + grid-column-start: 13; + } + + .\32 xl\:col-start-auto { + grid-column-start: auto; + } + + .\32 xl\:col-end-1 { + grid-column-end: 1; + } + + .\32 xl\:col-end-2 { + grid-column-end: 2; + } + + .\32 xl\:col-end-3 { + grid-column-end: 3; + } + + .\32 xl\:col-end-4 { + grid-column-end: 4; + } + + .\32 xl\:col-end-5 { + grid-column-end: 5; + } + + .\32 xl\:col-end-6 { + grid-column-end: 6; + } + + .\32 xl\:col-end-7 { + grid-column-end: 7; + } + + .\32 xl\:col-end-8 { + grid-column-end: 8; + } + + .\32 xl\:col-end-9 { + grid-column-end: 9; + } + + .\32 xl\:col-end-10 { + grid-column-end: 10; + } + + .\32 xl\:col-end-11 { + grid-column-end: 11; + } + + .\32 xl\:col-end-12 { + grid-column-end: 12; + } + + .\32 xl\:col-end-13 { + grid-column-end: 13; + } + + .\32 xl\:col-end-auto { + grid-column-end: auto; + } + } + + .row-auto { + grid-row: auto; + } + + .row-span-1 { + grid-row: span 1/span 1; + } + + .row-span-2 { + grid-row: span 2/span 2; + } + + .row-span-3 { + grid-row: span 3/span 3; + } + + .row-span-4 { + grid-row: span 4/span 4; + } + + .row-span-5 { + grid-row: span 5/span 5; + } + + .row-span-6 { + grid-row: span 6/span 6; + } + + .row-span-full { + grid-row: 1/-1; + } + + .row-start-1 { + grid-row-start: 1; + } + + .row-start-2 { + grid-row-start: 2; + } + + .row-start-3 { + grid-row-start: 3; + } + + .row-start-4 { + grid-row-start: 4; + } + + .row-start-5 { + grid-row-start: 5; + } + + .row-start-6 { + grid-row-start: 6; + } + + .row-start-7 { + grid-row-start: 7; + } + + .row-start-auto { + grid-row-start: auto; + } + + .row-end-1 { + grid-row-end: 1; + } + + .row-end-2 { + grid-row-end: 2; + } + + .row-end-3 { + grid-row-end: 3; + } + + .row-end-4 { + grid-row-end: 4; + } + + .row-end-5 { + grid-row-end: 5; + } + + .row-end-6 { + grid-row-end: 6; + } + + .row-end-7 { + grid-row-end: 7; + } + + .row-end-auto { + grid-row-end: auto; + } + + @media (min-width: 320px) { + .xs\:row-auto { + grid-row: auto; + } + + .xs\:row-span-1 { + grid-row: span 1/span 1; + } + + .xs\:row-span-2 { + grid-row: span 2/span 2; + } + + .xs\:row-span-3 { + grid-row: span 3/span 3; + } + + .xs\:row-span-4 { + grid-row: span 4/span 4; + } + + .xs\:row-span-5 { + grid-row: span 5/span 5; + } + + .xs\:row-span-6 { + grid-row: span 6/span 6; + } + + .xs\:row-span-7 { + grid-row: span 7/span 7; + } + + .xs\:row-span-8 { + grid-row: span 8/span 8; + } + + .xs\:row-span-9 { + grid-row: span 9/span 9; + } + + .xs\:row-span-10 { + grid-row: span 10/span 10; + } + + .xs\:row-span-11 { + grid-row: span 11/span 11; + } + + .xs\:row-span-12 { + grid-row: span 12/span 12; + } + + .xs\:row-span-full { + grid-row: 1/-1; + } + + .xs\:row-start-1 { + grid-row-start: 1; + } + + .xs\:row-start-2 { + grid-row-start: 2; + } + + .xs\:row-start-3 { + grid-row-start: 3; + } + + .xs\:row-start-4 { + grid-row-start: 4; + } + + .xs\:row-start-5 { + grid-row-start: 5; + } + + .xs\:row-start-6 { + grid-row-start: 6; + } + + .xs\:row-start-7 { + grid-row-start: 7; + } + + .xs\:row-start-8 { + grid-row-start: 8; + } + + .xs\:row-start-9 { + grid-row-start: 9; + } + + .xs\:row-start-10 { + grid-row-start: 10; + } + + .xs\:row-start-11 { + grid-row-start: 11; + } + + .xs\:row-start-12 { + grid-row-start: 12; + } + + .xs\:row-start-13 { + grid-row-start: 13; + } + + .xs\:row-start-auto { + grid-row-start: auto; + } + + .xs\:row-end-1 { + grid-row-end: 1; + } + + .xs\:row-end-2 { + grid-row-end: 2; + } + + .xs\:row-end-3 { + grid-row-end: 3; + } + + .xs\:row-end-4 { + grid-row-end: 4; + } + + .xs\:row-end-5 { + grid-row-end: 5; + } + + .xs\:row-end-6 { + grid-row-end: 6; + } + + .xs\:row-end-7 { + grid-row-end: 7; + } + + .xs\:row-end-8 { + grid-row-end: 8; + } + + .xs\:row-end-9 { + grid-row-end: 9; + } + + .xs\:row-end-10 { + grid-row-end: 10; + } + + .xs\:row-end-11 { + grid-row-end: 11; + } + + .xs\:row-end-12 { + grid-row-end: 12; + } + + .xs\:row-end-13 { + grid-row-end: 13; + } + + .xs\:row-end-auto { + grid-row-end: auto; + } + } + + @media (min-width: 480px) { + .sm\:row-auto { + grid-row: auto; + } + + .sm\:row-span-1 { + grid-row: span 1/span 1; + } + + .sm\:row-span-2 { + grid-row: span 2/span 2; + } + + .sm\:row-span-3 { + grid-row: span 3/span 3; + } + + .sm\:row-span-4 { + grid-row: span 4/span 4; + } + + .sm\:row-span-5 { + grid-row: span 5/span 5; + } + + .sm\:row-span-6 { + grid-row: span 6/span 6; + } + + .sm\:row-span-7 { + grid-row: span 7/span 7; + } + + .sm\:row-span-8 { + grid-row: span 8/span 8; + } + + .sm\:row-span-9 { + grid-row: span 9/span 9; + } + + .sm\:row-span-10 { + grid-row: span 10/span 10; + } + + .sm\:row-span-11 { + grid-row: span 11/span 11; + } + + .sm\:row-span-12 { + grid-row: span 12/span 12; + } + + .sm\:row-span-full { + grid-row: 1/-1; + } + + .sm\:row-start-1 { + grid-row-start: 1; + } + + .sm\:row-start-2 { + grid-row-start: 2; + } + + .sm\:row-start-3 { + grid-row-start: 3; + } + + .sm\:row-start-4 { + grid-row-start: 4; + } + + .sm\:row-start-5 { + grid-row-start: 5; + } + + .sm\:row-start-6 { + grid-row-start: 6; + } + + .sm\:row-start-7 { + grid-row-start: 7; + } + + .sm\:row-start-8 { + grid-row-start: 8; + } + + .sm\:row-start-9 { + grid-row-start: 9; + } + + .sm\:row-start-10 { + grid-row-start: 10; + } + + .sm\:row-start-11 { + grid-row-start: 11; + } + + .sm\:row-start-12 { + grid-row-start: 12; + } + + .sm\:row-start-13 { + grid-row-start: 13; + } + + .sm\:row-start-auto { + grid-row-start: auto; + } + + .sm\:row-end-1 { + grid-row-end: 1; + } + + .sm\:row-end-2 { + grid-row-end: 2; + } + + .sm\:row-end-3 { + grid-row-end: 3; + } + + .sm\:row-end-4 { + grid-row-end: 4; + } + + .sm\:row-end-5 { + grid-row-end: 5; + } + + .sm\:row-end-6 { + grid-row-end: 6; + } + + .sm\:row-end-7 { + grid-row-end: 7; + } + + .sm\:row-end-8 { + grid-row-end: 8; + } + + .sm\:row-end-9 { + grid-row-end: 9; + } + + .sm\:row-end-10 { + grid-row-end: 10; + } + + .sm\:row-end-11 { + grid-row-end: 11; + } + + .sm\:row-end-12 { + grid-row-end: 12; + } + + .sm\:row-end-13 { + grid-row-end: 13; + } + + .sm\:row-end-auto { + grid-row-end: auto; + } + } + + @media (min-width: 768px) { + .md\:row-auto { + grid-row: auto; + } + + .md\:row-span-1 { + grid-row: span 1/span 1; + } + + .md\:row-span-2 { + grid-row: span 2/span 2; + } + + .md\:row-span-3 { + grid-row: span 3/span 3; + } + + .md\:row-span-4 { + grid-row: span 4/span 4; + } + + .md\:row-span-5 { + grid-row: span 5/span 5; + } + + .md\:row-span-6 { + grid-row: span 6/span 6; + } + + .md\:row-span-7 { + grid-row: span 7/span 7; + } + + .md\:row-span-8 { + grid-row: span 8/span 8; + } + + .md\:row-span-9 { + grid-row: span 9/span 9; + } + + .md\:row-span-10 { + grid-row: span 10/span 10; + } + + .md\:row-span-11 { + grid-row: span 11/span 11; + } + + .md\:row-span-12 { + grid-row: span 12/span 12; + } + + .md\:row-span-full { + grid-row: 1/-1; + } + + .md\:row-start-1 { + grid-row-start: 1; + } + + .md\:row-start-2 { + grid-row-start: 2; + } + + .md\:row-start-3 { + grid-row-start: 3; + } + + .md\:row-start-4 { + grid-row-start: 4; + } + + .md\:row-start-5 { + grid-row-start: 5; + } + + .md\:row-start-6 { + grid-row-start: 6; + } + + .md\:row-start-7 { + grid-row-start: 7; + } + + .md\:row-start-8 { + grid-row-start: 8; + } + + .md\:row-start-9 { + grid-row-start: 9; + } + + .md\:row-start-10 { + grid-row-start: 10; + } + + .md\:row-start-11 { + grid-row-start: 11; + } + + .md\:row-start-12 { + grid-row-start: 12; + } + + .md\:row-start-13 { + grid-row-start: 13; + } + + .md\:row-start-auto { + grid-row-start: auto; + } + + .md\:row-end-1 { + grid-row-end: 1; + } + + .md\:row-end-2 { + grid-row-end: 2; + } + + .md\:row-end-3 { + grid-row-end: 3; + } + + .md\:row-end-4 { + grid-row-end: 4; + } + + .md\:row-end-5 { + grid-row-end: 5; + } + + .md\:row-end-6 { + grid-row-end: 6; + } + + .md\:row-end-7 { + grid-row-end: 7; + } + + .md\:row-end-8 { + grid-row-end: 8; + } + + .md\:row-end-9 { + grid-row-end: 9; + } + + .md\:row-end-10 { + grid-row-end: 10; + } + + .md\:row-end-11 { + grid-row-end: 11; + } + + .md\:row-end-12 { + grid-row-end: 12; + } + + .md\:row-end-13 { + grid-row-end: 13; + } + + .md\:row-end-auto { + grid-row-end: auto; + } + } + + @media (min-width: 960px) { + .lg\:row-auto { + grid-row: auto; + } + + .lg\:row-span-1 { + grid-row: span 1/span 1; + } + + .lg\:row-span-2 { + grid-row: span 2/span 2; + } + + .lg\:row-span-3 { + grid-row: span 3/span 3; + } + + .lg\:row-span-4 { + grid-row: span 4/span 4; + } + + .lg\:row-span-5 { + grid-row: span 5/span 5; + } + + .lg\:row-span-6 { + grid-row: span 6/span 6; + } + + .lg\:row-span-7 { + grid-row: span 7/span 7; + } + + .lg\:row-span-8 { + grid-row: span 8/span 8; + } + + .lg\:row-span-9 { + grid-row: span 9/span 9; + } + + .lg\:row-span-10 { + grid-row: span 10/span 10; + } + + .lg\:row-span-11 { + grid-row: span 11/span 11; + } + + .lg\:row-span-12 { + grid-row: span 12/span 12; + } + + .lg\:row-span-full { + grid-row: 1/-1; + } + + .lg\:row-start-1 { + grid-row-start: 1; + } + + .lg\:row-start-2 { + grid-row-start: 2; + } + + .lg\:row-start-3 { + grid-row-start: 3; + } + + .lg\:row-start-4 { + grid-row-start: 4; + } + + .lg\:row-start-5 { + grid-row-start: 5; + } + + .lg\:row-start-6 { + grid-row-start: 6; + } + + .lg\:row-start-7 { + grid-row-start: 7; + } + + .lg\:row-start-8 { + grid-row-start: 8; + } + + .lg\:row-start-9 { + grid-row-start: 9; + } + + .lg\:row-start-10 { + grid-row-start: 10; + } + + .lg\:row-start-11 { + grid-row-start: 11; + } + + .lg\:row-start-12 { + grid-row-start: 12; + } + + .lg\:row-start-13 { + grid-row-start: 13; + } + + .lg\:row-start-auto { + grid-row-start: auto; + } + + .lg\:row-end-1 { + grid-row-end: 1; + } + + .lg\:row-end-2 { + grid-row-end: 2; + } + + .lg\:row-end-3 { + grid-row-end: 3; + } + + .lg\:row-end-4 { + grid-row-end: 4; + } + + .lg\:row-end-5 { + grid-row-end: 5; + } + + .lg\:row-end-6 { + grid-row-end: 6; + } + + .lg\:row-end-7 { + grid-row-end: 7; + } + + .lg\:row-end-8 { + grid-row-end: 8; + } + + .lg\:row-end-9 { + grid-row-end: 9; + } + + .lg\:row-end-10 { + grid-row-end: 10; + } + + .lg\:row-end-11 { + grid-row-end: 11; + } + + .lg\:row-end-12 { + grid-row-end: 12; + } + + .lg\:row-end-13 { + grid-row-end: 13; + } + + .lg\:row-end-auto { + grid-row-end: auto; + } + } + + @media (min-width: 1200px) { + .xl\:row-auto { + grid-row: auto; + } + + .xl\:row-span-1 { + grid-row: span 1/span 1; + } + + .xl\:row-span-2 { + grid-row: span 2/span 2; + } + + .xl\:row-span-3 { + grid-row: span 3/span 3; + } + + .xl\:row-span-4 { + grid-row: span 4/span 4; + } + + .xl\:row-span-5 { + grid-row: span 5/span 5; + } + + .xl\:row-span-6 { + grid-row: span 6/span 6; + } + + .xl\:row-span-7 { + grid-row: span 7/span 7; + } + + .xl\:row-span-8 { + grid-row: span 8/span 8; + } + + .xl\:row-span-9 { + grid-row: span 9/span 9; + } + + .xl\:row-span-10 { + grid-row: span 10/span 10; + } + + .xl\:row-span-11 { + grid-row: span 11/span 11; + } + + .xl\:row-span-12 { + grid-row: span 12/span 12; + } + + .xl\:row-span-full { + grid-row: 1/-1; + } + + .xl\:row-start-1 { + grid-row-start: 1; + } + + .xl\:row-start-2 { + grid-row-start: 2; + } + + .xl\:row-start-3 { + grid-row-start: 3; + } + + .xl\:row-start-4 { + grid-row-start: 4; + } + + .xl\:row-start-5 { + grid-row-start: 5; + } + + .xl\:row-start-6 { + grid-row-start: 6; + } + + .xl\:row-start-7 { + grid-row-start: 7; + } + + .xl\:row-start-8 { + grid-row-start: 8; + } + + .xl\:row-start-9 { + grid-row-start: 9; + } + + .xl\:row-start-10 { + grid-row-start: 10; + } + + .xl\:row-start-11 { + grid-row-start: 11; + } + + .xl\:row-start-12 { + grid-row-start: 12; + } + + .xl\:row-start-13 { + grid-row-start: 13; + } + + .xl\:row-start-auto { + grid-row-start: auto; + } + + .xl\:row-end-1 { + grid-row-end: 1; + } + + .xl\:row-end-2 { + grid-row-end: 2; + } + + .xl\:row-end-3 { + grid-row-end: 3; + } + + .xl\:row-end-4 { + grid-row-end: 4; + } + + .xl\:row-end-5 { + grid-row-end: 5; + } + + .xl\:row-end-6 { + grid-row-end: 6; + } + + .xl\:row-end-7 { + grid-row-end: 7; + } + + .xl\:row-end-8 { + grid-row-end: 8; + } + + .xl\:row-end-9 { + grid-row-end: 9; + } + + .xl\:row-end-10 { + grid-row-end: 10; + } + + .xl\:row-end-11 { + grid-row-end: 11; + } + + .xl\:row-end-12 { + grid-row-end: 12; + } + + .xl\:row-end-13 { + grid-row-end: 13; + } + + .xl\:row-end-auto { + grid-row-end: auto; + } + } + + @media (min-width: 1400px) { + .\32 xl\:row-auto { + grid-row: auto; + } + + .\32 xl\:row-span-1 { + grid-row: span 1/span 1; + } + + .\32 xl\:row-span-2 { + grid-row: span 2/span 2; + } + + .\32 xl\:row-span-3 { + grid-row: span 3/span 3; + } + + .\32 xl\:row-span-4 { + grid-row: span 4/span 4; + } + + .\32 xl\:row-span-5 { + grid-row: span 5/span 5; + } + + .\32 xl\:row-span-6 { + grid-row: span 6/span 6; + } + + .\32 xl\:row-span-7 { + grid-row: span 7/span 7; + } + + .\32 xl\:row-span-8 { + grid-row: span 8/span 8; + } + + .\32 xl\:row-span-9 { + grid-row: span 9/span 9; + } + + .\32 xl\:row-span-10 { + grid-row: span 10/span 10; + } + + .\32 xl\:row-span-11 { + grid-row: span 11/span 11; + } + + .\32 xl\:row-span-12 { + grid-row: span 12/span 12; + } + + .\32 xl\:row-span-full { + grid-row: 1/-1; + } + + .\32 xl\:row-start-1 { + grid-row-start: 1; + } + + .\32 xl\:row-start-2 { + grid-row-start: 2; + } + + .\32 xl\:row-start-3 { + grid-row-start: 3; + } + + .\32 xl\:row-start-4 { + grid-row-start: 4; + } + + .\32 xl\:row-start-5 { + grid-row-start: 5; + } + + .\32 xl\:row-start-6 { + grid-row-start: 6; + } + + .\32 xl\:row-start-7 { + grid-row-start: 7; + } + + .\32 xl\:row-start-8 { + grid-row-start: 8; + } + + .\32 xl\:row-start-9 { + grid-row-start: 9; + } + + .\32 xl\:row-start-10 { + grid-row-start: 10; + } + + .\32 xl\:row-start-11 { + grid-row-start: 11; + } + + .\32 xl\:row-start-12 { + grid-row-start: 12; + } + + .\32 xl\:row-start-13 { + grid-row-start: 13; + } + + .\32 xl\:row-start-auto { + grid-row-start: auto; + } + + .\32 xl\:row-end-1 { + grid-row-end: 1; + } + + .\32 xl\:row-end-2 { + grid-row-end: 2; + } + + .\32 xl\:row-end-3 { + grid-row-end: 3; + } + + .\32 xl\:row-end-4 { + grid-row-end: 4; + } + + .\32 xl\:row-end-5 { + grid-row-end: 5; + } + + .\32 xl\:row-end-6 { + grid-row-end: 6; + } + + .\32 xl\:row-end-7 { + grid-row-end: 7; + } + + .\32 xl\:row-end-8 { + grid-row-end: 8; + } + + .\32 xl\:row-end-9 { + grid-row-end: 9; + } + + .\32 xl\:row-end-10 { + grid-row-end: 10; + } + + .\32 xl\:row-end-11 { + grid-row-end: 11; + } + + .\32 xl\:row-end-12 { + grid-row-end: 12; + } + + .\32 xl\:row-end-13 { + grid-row-end: 13; + } + + .\32 xl\:row-end-auto { + grid-row-end: auto; + } + } + } + } + } +}