@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Grid/Grid.css

@@ -0,0 +1,1036 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */
+.Grid {
+  display: grid;
+}
+.Grid_cols_1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+.Grid_cols_2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+.Grid_cols_3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+.Grid_cols_4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+.Grid_cols_5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+.Grid_cols_6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+.Grid_cols_7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+.Grid_cols_8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+.Grid_cols_9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+.Grid_cols_10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+.Grid_cols_11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+.Grid_cols_12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+.Grid_gap_0 {
+    grid-gap: 0;
+  }
+.Grid_gap_xs {
+    grid-gap: var(--space-xs);
+  }
+.Grid_gap_s {
+    grid-gap: var(--space-s);
+  }
+.Grid_gap_m {
+    grid-gap: var(--space-m);
+  }
+.Grid_gap_l {
+    grid-gap: var(--space-l);
+  }
+.Grid_gap_xl {
+    grid-gap: var(--space-xl);
+  }
+.Grid_gap_2xl {
+    grid-gap: var(--space-2xl);
+  }
+.Grid_gap_3xl {
+    grid-gap: var(--space-3xl);
+  }
+.Grid_gap_4xl {
+    grid-gap: var(--space-4xl);
+  }
+.Grid_gap_5xl {
+    grid-gap: var(--space-5xl);
+  }
+.Grid_gap_6xl {
+    grid-gap: var(--space-6xl);
+  }
+.Grid_gap_7xl {
+    grid-gap: var(--space-7xl);
+  }
+.Grid_gap_8xl {
+    grid-gap: var(--space-8xl);
+  }
+@media (width >= 0) {
+      .Grid_gap_xs_0 {
+    grid-gap: 0;
+  }
+      .Grid_gap_xs_xs {
+    grid-gap: var(--space-xs);
+  }
+      .Grid_gap_xs_s {
+    grid-gap: var(--space-s);
+  }
+      .Grid_gap_xs_m {
+    grid-gap: var(--space-m);
+  }
+      .Grid_gap_xs_l {
+    grid-gap: var(--space-l);
+  }
+      .Grid_gap_xs_xl {
+    grid-gap: var(--space-xl);
+  }
+      .Grid_gap_xs_2xl {
+    grid-gap: var(--space-2xl);
+  }
+      .Grid_gap_xs_3xl {
+    grid-gap: var(--space-3xl);
+  }
+      .Grid_gap_xs_4xl {
+    grid-gap: var(--space-4xl);
+  }
+      .Grid_gap_xs_5xl {
+    grid-gap: var(--space-5xl);
+  }
+      .Grid_gap_xs_6xl {
+    grid-gap: var(--space-6xl);
+  }
+      .Grid_gap_xs_7xl {
+    grid-gap: var(--space-7xl);
+  }
+      .Grid_gap_xs_8xl {
+    grid-gap: var(--space-8xl);
+  }
+      .Grid_cols_xs_1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+      .Grid_cols_xs_2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+      .Grid_cols_xs_3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+      .Grid_cols_xs_4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+      .Grid_cols_xs_5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+      .Grid_cols_xs_6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+      .Grid_cols_xs_7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+      .Grid_cols_xs_8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+      .Grid_cols_xs_9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+      .Grid_cols_xs_10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+      .Grid_cols_xs_11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+      .Grid_cols_xs_12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  }
+@media (width >= 640px) {
+      .Grid_gap_s_0 {
+    grid-gap: 0;
+  }
+      .Grid_gap_s_xs {
+    grid-gap: var(--space-xs);
+  }
+      .Grid_gap_s_s {
+    grid-gap: var(--space-s);
+  }
+      .Grid_gap_s_m {
+    grid-gap: var(--space-m);
+  }
+      .Grid_gap_s_l {
+    grid-gap: var(--space-l);
+  }
+      .Grid_gap_s_xl {
+    grid-gap: var(--space-xl);
+  }
+      .Grid_gap_s_2xl {
+    grid-gap: var(--space-2xl);
+  }
+      .Grid_gap_s_3xl {
+    grid-gap: var(--space-3xl);
+  }
+      .Grid_gap_s_4xl {
+    grid-gap: var(--space-4xl);
+  }
+      .Grid_gap_s_5xl {
+    grid-gap: var(--space-5xl);
+  }
+      .Grid_gap_s_6xl {
+    grid-gap: var(--space-6xl);
+  }
+      .Grid_gap_s_7xl {
+    grid-gap: var(--space-7xl);
+  }
+      .Grid_gap_s_8xl {
+    grid-gap: var(--space-8xl);
+  }
+      .Grid_cols_s_1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+      .Grid_cols_s_2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+      .Grid_cols_s_3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+      .Grid_cols_s_4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+      .Grid_cols_s_5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+      .Grid_cols_s_6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+      .Grid_cols_s_7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+      .Grid_cols_s_8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+      .Grid_cols_s_9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+      .Grid_cols_s_10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+      .Grid_cols_s_11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+      .Grid_cols_s_12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  }
+@media (width >=  1024px) {
+      .Grid_gap_m_0 {
+    grid-gap: 0;
+  }
+      .Grid_gap_m_xs {
+    grid-gap: var(--space-xs);
+  }
+      .Grid_gap_m_s {
+    grid-gap: var(--space-s);
+  }
+      .Grid_gap_m_m {
+    grid-gap: var(--space-m);
+  }
+      .Grid_gap_m_l {
+    grid-gap: var(--space-l);
+  }
+      .Grid_gap_m_xl {
+    grid-gap: var(--space-xl);
+  }
+      .Grid_gap_m_2xl {
+    grid-gap: var(--space-2xl);
+  }
+      .Grid_gap_m_3xl {
+    grid-gap: var(--space-3xl);
+  }
+      .Grid_gap_m_4xl {
+    grid-gap: var(--space-4xl);
+  }
+      .Grid_gap_m_5xl {
+    grid-gap: var(--space-5xl);
+  }
+      .Grid_gap_m_6xl {
+    grid-gap: var(--space-6xl);
+  }
+      .Grid_gap_m_7xl {
+    grid-gap: var(--space-7xl);
+  }
+      .Grid_gap_m_8xl {
+    grid-gap: var(--space-8xl);
+  }
+      .Grid_cols_m_1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+      .Grid_cols_m_2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+      .Grid_cols_m_3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+      .Grid_cols_m_4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+      .Grid_cols_m_5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+      .Grid_cols_m_6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+      .Grid_cols_m_7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+      .Grid_cols_m_8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+      .Grid_cols_m_9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+      .Grid_cols_m_10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+      .Grid_cols_m_11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+      .Grid_cols_m_12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  }
+@media (width >= 1280px) {
+      .Grid_gap_l_0 {
+    grid-gap: 0;
+  }
+      .Grid_gap_l_xs {
+    grid-gap: var(--space-xs);
+  }
+      .Grid_gap_l_s {
+    grid-gap: var(--space-s);
+  }
+      .Grid_gap_l_m {
+    grid-gap: var(--space-m);
+  }
+      .Grid_gap_l_l {
+    grid-gap: var(--space-l);
+  }
+      .Grid_gap_l_xl {
+    grid-gap: var(--space-xl);
+  }
+      .Grid_gap_l_2xl {
+    grid-gap: var(--space-2xl);
+  }
+      .Grid_gap_l_3xl {
+    grid-gap: var(--space-3xl);
+  }
+      .Grid_gap_l_4xl {
+    grid-gap: var(--space-4xl);
+  }
+      .Grid_gap_l_5xl {
+    grid-gap: var(--space-5xl);
+  }
+      .Grid_gap_l_6xl {
+    grid-gap: var(--space-6xl);
+  }
+      .Grid_gap_l_7xl {
+    grid-gap: var(--space-7xl);
+  }
+      .Grid_gap_l_8xl {
+    grid-gap: var(--space-8xl);
+  }
+      .Grid_cols_l_1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+      .Grid_cols_l_2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+      .Grid_cols_l_3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+      .Grid_cols_l_4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+      .Grid_cols_l_5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+      .Grid_cols_l_6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+      .Grid_cols_l_7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+      .Grid_cols_l_8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+      .Grid_cols_l_9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+      .Grid_cols_l_10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+      .Grid_cols_l_11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+      .Grid_cols_l_12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  }
+.GridItem {
+  --grid-col-start: auto;
+  --grid-col-end: auto;
+  --grid-row-start: auto;
+  --grid-row-end: auto;
+  grid-column: var(--grid-col-start) / var(--grid-col-end);
+  grid-row: var(--grid-row-start) / var(--grid-row-end);
+}
+.GridItem_col_1 {
+    --grid-col-start: auto;
+    --grid-col-end: span 1;
+  }
+.GridItem_col_2 {
+    --grid-col-start: auto;
+    --grid-col-end: span 2;
+  }
+.GridItem_col_3 {
+    --grid-col-start: auto;
+    --grid-col-end: span 3;
+  }
+.GridItem_col_4 {
+    --grid-col-start: auto;
+    --grid-col-end: span 4;
+  }
+.GridItem_col_5 {
+    --grid-col-start: auto;
+    --grid-col-end: span 5;
+  }
+.GridItem_col_6 {
+    --grid-col-start: auto;
+    --grid-col-end: span 6;
+  }
+.GridItem_col_7 {
+    --grid-col-start: auto;
+    --grid-col-end: span 7;
+  }
+.GridItem_col_8 {
+    --grid-col-start: auto;
+    --grid-col-end: span 8;
+  }
+.GridItem_col_9 {
+    --grid-col-start: auto;
+    --grid-col-end: span 9;
+  }
+.GridItem_col_10 {
+    --grid-col-start: auto;
+    --grid-col-end: span 10;
+  }
+.GridItem_col_11 {
+    --grid-col-start: auto;
+    --grid-col-end: span 11;
+  }
+.GridItem_col_12 {
+    --grid-col-start: auto;
+    --grid-col-end: span 12;
+  }
+.GridItem_colStart_1 {
+    --grid-col-start: 1;
+  }
+.GridItem_colStart_2 {
+    --grid-col-start: 2;
+  }
+.GridItem_colStart_3 {
+    --grid-col-start: 3;
+  }
+.GridItem_colStart_4 {
+    --grid-col-start: 4;
+  }
+.GridItem_colStart_5 {
+    --grid-col-start: 5;
+  }
+.GridItem_colStart_6 {
+    --grid-col-start: 6;
+  }
+.GridItem_colStart_7 {
+    --grid-col-start: 7;
+  }
+.GridItem_colStart_8 {
+    --grid-col-start: 8;
+  }
+.GridItem_colStart_9 {
+    --grid-col-start: 9;
+  }
+.GridItem_colStart_10 {
+    --grid-col-start: 10;
+  }
+.GridItem_colStart_11 {
+    --grid-col-start: 11;
+  }
+.GridItem_colStart_12 {
+    --grid-col-start: 12;
+  }
+.GridItem_row_1 {
+    --grid-row-start: span 1;
+    --grid-row-end: auto;
+  }
+.GridItem_row_2 {
+    --grid-row-start: span 2;
+    --grid-row-end: auto;
+  }
+.GridItem_row_3 {
+    --grid-row-start: span 3;
+    --grid-row-end: auto;
+  }
+.GridItem_row_4 {
+    --grid-row-start: span 4;
+    --grid-row-end: auto;
+  }
+.GridItem_row_5 {
+    --grid-row-start: span 5;
+    --grid-row-end: auto;
+  }
+.GridItem_row_6 {
+    --grid-row-start: span 6;
+    --grid-row-end: auto;
+  }
+.GridItem_rowStart_1 {
+    --grid-row-start: 1;
+  }
+.GridItem_rowStart_2 {
+    --grid-row-start: 2;
+  }
+.GridItem_rowStart_3 {
+    --grid-row-start: 3;
+  }
+.GridItem_rowStart_4 {
+    --grid-row-start: 4;
+  }
+.GridItem_rowStart_5 {
+    --grid-row-start: 5;
+  }
+.GridItem_rowStart_6 {
+    --grid-row-start: 6;
+  }
+@media (width >= 0) {
+      .GridItem_col_xs_1 {
+    --grid-col-start: auto;
+    --grid-col-end: span 1;
+  }
+      .GridItem_col_xs_2 {
+    --grid-col-start: auto;
+    --grid-col-end: span 2;
+  }
+      .GridItem_col_xs_3 {
+    --grid-col-start: auto;
+    --grid-col-end: span 3;
+  }
+      .GridItem_col_xs_4 {
+    --grid-col-start: auto;
+    --grid-col-end: span 4;
+  }
+      .GridItem_col_xs_5 {
+    --grid-col-start: auto;
+    --grid-col-end: span 5;
+  }
+      .GridItem_col_xs_6 {
+    --grid-col-start: auto;
+    --grid-col-end: span 6;
+  }
+      .GridItem_col_xs_7 {
+    --grid-col-start: auto;
+    --grid-col-end: span 7;
+  }
+      .GridItem_col_xs_8 {
+    --grid-col-start: auto;
+    --grid-col-end: span 8;
+  }
+      .GridItem_col_xs_9 {
+    --grid-col-start: auto;
+    --grid-col-end: span 9;
+  }
+      .GridItem_col_xs_10 {
+    --grid-col-start: auto;
+    --grid-col-end: span 10;
+  }
+      .GridItem_col_xs_11 {
+    --grid-col-start: auto;
+    --grid-col-end: span 11;
+  }
+      .GridItem_col_xs_12 {
+    --grid-col-start: auto;
+    --grid-col-end: span 12;
+  }
+      .GridItem_row_xs_1 {
+    --grid-row-start: span 1;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_xs_2 {
+    --grid-row-start: span 2;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_xs_3 {
+    --grid-row-start: span 3;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_xs_4 {
+    --grid-row-start: span 4;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_xs_5 {
+    --grid-row-start: span 5;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_xs_6 {
+    --grid-row-start: span 6;
+    --grid-row-end: auto;
+  }
+      .GridItem_colStart_xs_1 {
+    --grid-col-start: 1;
+  }
+      .GridItem_colStart_xs_2 {
+    --grid-col-start: 2;
+  }
+      .GridItem_colStart_xs_3 {
+    --grid-col-start: 3;
+  }
+      .GridItem_colStart_xs_4 {
+    --grid-col-start: 4;
+  }
+      .GridItem_colStart_xs_5 {
+    --grid-col-start: 5;
+  }
+      .GridItem_colStart_xs_6 {
+    --grid-col-start: 6;
+  }
+      .GridItem_colStart_xs_7 {
+    --grid-col-start: 7;
+  }
+      .GridItem_colStart_xs_8 {
+    --grid-col-start: 8;
+  }
+      .GridItem_colStart_xs_9 {
+    --grid-col-start: 9;
+  }
+      .GridItem_colStart_xs_10 {
+    --grid-col-start: 10;
+  }
+      .GridItem_colStart_xs_11 {
+    --grid-col-start: 11;
+  }
+      .GridItem_colStart_xs_12 {
+    --grid-col-start: 12;
+  }
+      .GridItem_rowStart_xs_1 {
+    --grid-row-start: 1;
+  }
+      .GridItem_rowStart_xs_2 {
+    --grid-row-start: 2;
+  }
+      .GridItem_rowStart_xs_3 {
+    --grid-row-start: 3;
+  }
+      .GridItem_rowStart_xs_4 {
+    --grid-row-start: 4;
+  }
+      .GridItem_rowStart_xs_5 {
+    --grid-row-start: 5;
+  }
+      .GridItem_rowStart_xs_6 {
+    --grid-row-start: 6;
+  }
+  }
+@media (width >= 640px) {
+      .GridItem_col_s_1 {
+    --grid-col-start: auto;
+    --grid-col-end: span 1;
+  }
+      .GridItem_col_s_2 {
+    --grid-col-start: auto;
+    --grid-col-end: span 2;
+  }
+      .GridItem_col_s_3 {
+    --grid-col-start: auto;
+    --grid-col-end: span 3;
+  }
+      .GridItem_col_s_4 {
+    --grid-col-start: auto;
+    --grid-col-end: span 4;
+  }
+      .GridItem_col_s_5 {
+    --grid-col-start: auto;
+    --grid-col-end: span 5;
+  }
+      .GridItem_col_s_6 {
+    --grid-col-start: auto;
+    --grid-col-end: span 6;
+  }
+      .GridItem_col_s_7 {
+    --grid-col-start: auto;
+    --grid-col-end: span 7;
+  }
+      .GridItem_col_s_8 {
+    --grid-col-start: auto;
+    --grid-col-end: span 8;
+  }
+      .GridItem_col_s_9 {
+    --grid-col-start: auto;
+    --grid-col-end: span 9;
+  }
+      .GridItem_col_s_10 {
+    --grid-col-start: auto;
+    --grid-col-end: span 10;
+  }
+      .GridItem_col_s_11 {
+    --grid-col-start: auto;
+    --grid-col-end: span 11;
+  }
+      .GridItem_col_s_12 {
+    --grid-col-start: auto;
+    --grid-col-end: span 12;
+  }
+      .GridItem_row_s_1 {
+    --grid-row-start: span 1;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_s_2 {
+    --grid-row-start: span 2;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_s_3 {
+    --grid-row-start: span 3;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_s_4 {
+    --grid-row-start: span 4;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_s_5 {
+    --grid-row-start: span 5;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_s_6 {
+    --grid-row-start: span 6;
+    --grid-row-end: auto;
+  }
+      .GridItem_colStart_s_1 {
+    --grid-col-start: 1;
+  }
+      .GridItem_colStart_s_2 {
+    --grid-col-start: 2;
+  }
+      .GridItem_colStart_s_3 {
+    --grid-col-start: 3;
+  }
+      .GridItem_colStart_s_4 {
+    --grid-col-start: 4;
+  }
+      .GridItem_colStart_s_5 {
+    --grid-col-start: 5;
+  }
+      .GridItem_colStart_s_6 {
+    --grid-col-start: 6;
+  }
+      .GridItem_colStart_s_7 {
+    --grid-col-start: 7;
+  }
+      .GridItem_colStart_s_8 {
+    --grid-col-start: 8;
+  }
+      .GridItem_colStart_s_9 {
+    --grid-col-start: 9;
+  }
+      .GridItem_colStart_s_10 {
+    --grid-col-start: 10;
+  }
+      .GridItem_colStart_s_11 {
+    --grid-col-start: 11;
+  }
+      .GridItem_colStart_s_12 {
+    --grid-col-start: 12;
+  }
+      .GridItem_rowStart_s_1 {
+    --grid-row-start: 1;
+  }
+      .GridItem_rowStart_s_2 {
+    --grid-row-start: 2;
+  }
+      .GridItem_rowStart_s_3 {
+    --grid-row-start: 3;
+  }
+      .GridItem_rowStart_s_4 {
+    --grid-row-start: 4;
+  }
+      .GridItem_rowStart_s_5 {
+    --grid-row-start: 5;
+  }
+      .GridItem_rowStart_s_6 {
+    --grid-row-start: 6;
+  }
+  }
+@media (width >=  1024px) {
+      .GridItem_col_m_1 {
+    --grid-col-start: auto;
+    --grid-col-end: span 1;
+  }
+      .GridItem_col_m_2 {
+    --grid-col-start: auto;
+    --grid-col-end: span 2;
+  }
+      .GridItem_col_m_3 {
+    --grid-col-start: auto;
+    --grid-col-end: span 3;
+  }
+      .GridItem_col_m_4 {
+    --grid-col-start: auto;
+    --grid-col-end: span 4;
+  }
+      .GridItem_col_m_5 {
+    --grid-col-start: auto;
+    --grid-col-end: span 5;
+  }
+      .GridItem_col_m_6 {
+    --grid-col-start: auto;
+    --grid-col-end: span 6;
+  }
+      .GridItem_col_m_7 {
+    --grid-col-start: auto;
+    --grid-col-end: span 7;
+  }
+      .GridItem_col_m_8 {
+    --grid-col-start: auto;
+    --grid-col-end: span 8;
+  }
+      .GridItem_col_m_9 {
+    --grid-col-start: auto;
+    --grid-col-end: span 9;
+  }
+      .GridItem_col_m_10 {
+    --grid-col-start: auto;
+    --grid-col-end: span 10;
+  }
+      .GridItem_col_m_11 {
+    --grid-col-start: auto;
+    --grid-col-end: span 11;
+  }
+      .GridItem_col_m_12 {
+    --grid-col-start: auto;
+    --grid-col-end: span 12;
+  }
+      .GridItem_row_m_1 {
+    --grid-row-start: span 1;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_m_2 {
+    --grid-row-start: span 2;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_m_3 {
+    --grid-row-start: span 3;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_m_4 {
+    --grid-row-start: span 4;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_m_5 {
+    --grid-row-start: span 5;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_m_6 {
+    --grid-row-start: span 6;
+    --grid-row-end: auto;
+  }
+      .GridItem_colStart_m_1 {
+    --grid-col-start: 1;
+  }
+      .GridItem_colStart_m_2 {
+    --grid-col-start: 2;
+  }
+      .GridItem_colStart_m_3 {
+    --grid-col-start: 3;
+  }
+      .GridItem_colStart_m_4 {
+    --grid-col-start: 4;
+  }
+      .GridItem_colStart_m_5 {
+    --grid-col-start: 5;
+  }
+      .GridItem_colStart_m_6 {
+    --grid-col-start: 6;
+  }
+      .GridItem_colStart_m_7 {
+    --grid-col-start: 7;
+  }
+      .GridItem_colStart_m_8 {
+    --grid-col-start: 8;
+  }
+      .GridItem_colStart_m_9 {
+    --grid-col-start: 9;
+  }
+      .GridItem_colStart_m_10 {
+    --grid-col-start: 10;
+  }
+      .GridItem_colStart_m_11 {
+    --grid-col-start: 11;
+  }
+      .GridItem_colStart_m_12 {
+    --grid-col-start: 12;
+  }
+      .GridItem_rowStart_m_1 {
+    --grid-row-start: 1;
+  }
+      .GridItem_rowStart_m_2 {
+    --grid-row-start: 2;
+  }
+      .GridItem_rowStart_m_3 {
+    --grid-row-start: 3;
+  }
+      .GridItem_rowStart_m_4 {
+    --grid-row-start: 4;
+  }
+      .GridItem_rowStart_m_5 {
+    --grid-row-start: 5;
+  }
+      .GridItem_rowStart_m_6 {
+    --grid-row-start: 6;
+  }
+  }
+@media (width >= 1280px) {
+      .GridItem_col_l_1 {
+    --grid-col-start: auto;
+    --grid-col-end: span 1;
+  }
+      .GridItem_col_l_2 {
+    --grid-col-start: auto;
+    --grid-col-end: span 2;
+  }
+      .GridItem_col_l_3 {
+    --grid-col-start: auto;
+    --grid-col-end: span 3;
+  }
+      .GridItem_col_l_4 {
+    --grid-col-start: auto;
+    --grid-col-end: span 4;
+  }
+      .GridItem_col_l_5 {
+    --grid-col-start: auto;
+    --grid-col-end: span 5;
+  }
+      .GridItem_col_l_6 {
+    --grid-col-start: auto;
+    --grid-col-end: span 6;
+  }
+      .GridItem_col_l_7 {
+    --grid-col-start: auto;
+    --grid-col-end: span 7;
+  }
+      .GridItem_col_l_8 {
+    --grid-col-start: auto;
+    --grid-col-end: span 8;
+  }
+      .GridItem_col_l_9 {
+    --grid-col-start: auto;
+    --grid-col-end: span 9;
+  }
+      .GridItem_col_l_10 {
+    --grid-col-start: auto;
+    --grid-col-end: span 10;
+  }
+      .GridItem_col_l_11 {
+    --grid-col-start: auto;
+    --grid-col-end: span 11;
+  }
+      .GridItem_col_l_12 {
+    --grid-col-start: auto;
+    --grid-col-end: span 12;
+  }
+      .GridItem_row_l_1 {
+    --grid-row-start: span 1;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_l_2 {
+    --grid-row-start: span 2;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_l_3 {
+    --grid-row-start: span 3;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_l_4 {
+    --grid-row-start: span 4;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_l_5 {
+    --grid-row-start: span 5;
+    --grid-row-end: auto;
+  }
+      .GridItem_row_l_6 {
+    --grid-row-start: span 6;
+    --grid-row-end: auto;
+  }
+      .GridItem_colStart_l_1 {
+    --grid-col-start: 1;
+  }
+      .GridItem_colStart_l_2 {
+    --grid-col-start: 2;
+  }
+      .GridItem_colStart_l_3 {
+    --grid-col-start: 3;
+  }
+      .GridItem_colStart_l_4 {
+    --grid-col-start: 4;
+  }
+      .GridItem_colStart_l_5 {
+    --grid-col-start: 5;
+  }
+      .GridItem_colStart_l_6 {
+    --grid-col-start: 6;
+  }
+      .GridItem_colStart_l_7 {
+    --grid-col-start: 7;
+  }
+      .GridItem_colStart_l_8 {
+    --grid-col-start: 8;
+  }
+      .GridItem_colStart_l_9 {
+    --grid-col-start: 9;
+  }
+      .GridItem_colStart_l_10 {
+    --grid-col-start: 10;
+  }
+      .GridItem_colStart_l_11 {
+    --grid-col-start: 11;
+  }
+      .GridItem_colStart_l_12 {
+    --grid-col-start: 12;
+  }
+      .GridItem_rowStart_l_1 {
+    --grid-row-start: 1;
+  }
+      .GridItem_rowStart_l_2 {
+    --grid-row-start: 2;
+  }
+      .GridItem_rowStart_l_3 {
+    --grid-row-start: 3;
+  }
+      .GridItem_rowStart_l_4 {
+    --grid-row-start: 4;
+  }
+      .GridItem_rowStart_l_5 {
+    --grid-row-start: 5;
+  }
+      .GridItem_rowStart_l_6 {
+    --grid-row-start: 6;
+  }
+  }