@ozen-ui/kit/__inner__/cjs/components/Grid/Grid.css

React component library

/* 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);
  }
.Grid_colGap_0 {
    grid-column-gap: 0;
  }
.Grid_colGap_xs {
    grid-column-gap: var(--space-xs);
  }
.Grid_colGap_s {
    grid-column-gap: var(--space-s);
  }
.Grid_colGap_m {
    grid-column-gap: var(--space-m);
  }
.Grid_colGap_l {
    grid-column-gap: var(--space-l);
  }
.Grid_colGap_xl {
    grid-column-gap: var(--space-xl);
  }
.Grid_colGap_2xl {
    grid-column-gap: var(--space-2xl);
  }
.Grid_colGap_3xl {
    grid-column-gap: var(--space-3xl);
  }
.Grid_colGap_4xl {
    grid-column-gap: var(--space-4xl);
  }
.Grid_colGap_5xl {
    grid-column-gap: var(--space-5xl);
  }
.Grid_colGap_6xl {
    grid-column-gap: var(--space-6xl);
  }
.Grid_colGap_7xl {
    grid-column-gap: var(--space-7xl);
  }
.Grid_colGap_8xl {
    grid-column-gap: var(--space-8xl);
  }
.Grid_rowGap_0 {
    grid-row-gap: 0;
  }
.Grid_rowGap_xs {
    grid-row-gap: var(--space-xs);
  }
.Grid_rowGap_s {
    grid-row-gap: var(--space-s);
  }
.Grid_rowGap_m {
    grid-row-gap: var(--space-m);
  }
.Grid_rowGap_l {
    grid-row-gap: var(--space-l);
  }
.Grid_rowGap_xl {
    grid-row-gap: var(--space-xl);
  }
.Grid_rowGap_2xl {
    grid-row-gap: var(--space-2xl);
  }
.Grid_rowGap_3xl {
    grid-row-gap: var(--space-3xl);
  }
.Grid_rowGap_4xl {
    grid-row-gap: var(--space-4xl);
  }
.Grid_rowGap_5xl {
    grid-row-gap: var(--space-5xl);
  }
.Grid_rowGap_6xl {
    grid-row-gap: var(--space-6xl);
  }
.Grid_rowGap_7xl {
    grid-row-gap: var(--space-7xl);
  }
.Grid_rowGap_8xl {
    grid-row-gap: var(--space-8xl);
  }
.Grid_align_start {
      align-items: start;
    }
.Grid_align_end {
      align-items: end;
    }
.Grid_align_center {
      align-items: center;
    }
.Grid_justify_start {
      justify-items: start;
    }
.Grid_justify_end {
      justify-items: end;
    }
.Grid_justify_center {
      justify-items: center;
    }
@media (min-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_colGap_xs_0 {
    grid-column-gap: 0;
  }
      .Grid_colGap_xs_xs {
    grid-column-gap: var(--space-xs);
  }
      .Grid_colGap_xs_s {
    grid-column-gap: var(--space-s);
  }
      .Grid_colGap_xs_m {
    grid-column-gap: var(--space-m);
  }
      .Grid_colGap_xs_l {
    grid-column-gap: var(--space-l);
  }
      .Grid_colGap_xs_xl {
    grid-column-gap: var(--space-xl);
  }
      .Grid_colGap_xs_2xl {
    grid-column-gap: var(--space-2xl);
  }
      .Grid_colGap_xs_3xl {
    grid-column-gap: var(--space-3xl);
  }
      .Grid_colGap_xs_4xl {
    grid-column-gap: var(--space-4xl);
  }
      .Grid_colGap_xs_5xl {
    grid-column-gap: var(--space-5xl);
  }
      .Grid_colGap_xs_6xl {
    grid-column-gap: var(--space-6xl);
  }
      .Grid_colGap_xs_7xl {
    grid-column-gap: var(--space-7xl);
  }
      .Grid_colGap_xs_8xl {
    grid-column-gap: var(--space-8xl);
  }
      .Grid_rowGap_xs_0 {
    grid-row-gap: 0;
  }
      .Grid_rowGap_xs_xs {
    grid-row-gap: var(--space-xs);
  }
      .Grid_rowGap_xs_s {
    grid-row-gap: var(--space-s);
  }
      .Grid_rowGap_xs_m {
    grid-row-gap: var(--space-m);
  }
      .Grid_rowGap_xs_l {
    grid-row-gap: var(--space-l);
  }
      .Grid_rowGap_xs_xl {
    grid-row-gap: var(--space-xl);
  }
      .Grid_rowGap_xs_2xl {
    grid-row-gap: var(--space-2xl);
  }
      .Grid_rowGap_xs_3xl {
    grid-row-gap: var(--space-3xl);
  }
      .Grid_rowGap_xs_4xl {
    grid-row-gap: var(--space-4xl);
  }
      .Grid_rowGap_xs_5xl {
    grid-row-gap: var(--space-5xl);
  }
      .Grid_rowGap_xs_6xl {
    grid-row-gap: var(--space-6xl);
  }
      .Grid_rowGap_xs_7xl {
    grid-row-gap: var(--space-7xl);
  }
      .Grid_rowGap_xs_8xl {
    grid-row-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 (min-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_colGap_s_0 {
    grid-column-gap: 0;
  }
      .Grid_colGap_s_xs {
    grid-column-gap: var(--space-xs);
  }
      .Grid_colGap_s_s {
    grid-column-gap: var(--space-s);
  }
      .Grid_colGap_s_m {
    grid-column-gap: var(--space-m);
  }
      .Grid_colGap_s_l {
    grid-column-gap: var(--space-l);
  }
      .Grid_colGap_s_xl {
    grid-column-gap: var(--space-xl);
  }
      .Grid_colGap_s_2xl {
    grid-column-gap: var(--space-2xl);
  }
      .Grid_colGap_s_3xl {
    grid-column-gap: var(--space-3xl);
  }
      .Grid_colGap_s_4xl {
    grid-column-gap: var(--space-4xl);
  }
      .Grid_colGap_s_5xl {
    grid-column-gap: var(--space-5xl);
  }
      .Grid_colGap_s_6xl {
    grid-column-gap: var(--space-6xl);
  }
      .Grid_colGap_s_7xl {
    grid-column-gap: var(--space-7xl);
  }
      .Grid_colGap_s_8xl {
    grid-column-gap: var(--space-8xl);
  }
      .Grid_rowGap_s_0 {
    grid-row-gap: 0;
  }
      .Grid_rowGap_s_xs {
    grid-row-gap: var(--space-xs);
  }
      .Grid_rowGap_s_s {
    grid-row-gap: var(--space-s);
  }
      .Grid_rowGap_s_m {
    grid-row-gap: var(--space-m);
  }
      .Grid_rowGap_s_l {
    grid-row-gap: var(--space-l);
  }
      .Grid_rowGap_s_xl {
    grid-row-gap: var(--space-xl);
  }
      .Grid_rowGap_s_2xl {
    grid-row-gap: var(--space-2xl);
  }
      .Grid_rowGap_s_3xl {
    grid-row-gap: var(--space-3xl);
  }
      .Grid_rowGap_s_4xl {
    grid-row-gap: var(--space-4xl);
  }
      .Grid_rowGap_s_5xl {
    grid-row-gap: var(--space-5xl);
  }
      .Grid_rowGap_s_6xl {
    grid-row-gap: var(--space-6xl);
  }
      .Grid_rowGap_s_7xl {
    grid-row-gap: var(--space-7xl);
  }
      .Grid_rowGap_s_8xl {
    grid-row-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 (min-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_colGap_m_0 {
    grid-column-gap: 0;
  }
      .Grid_colGap_m_xs {
    grid-column-gap: var(--space-xs);
  }
      .Grid_colGap_m_s {
    grid-column-gap: var(--space-s);
  }
      .Grid_colGap_m_m {
    grid-column-gap: var(--space-m);
  }
      .Grid_colGap_m_l {
    grid-column-gap: var(--space-l);
  }
      .Grid_colGap_m_xl {
    grid-column-gap: var(--space-xl);
  }
      .Grid_colGap_m_2xl {
    grid-column-gap: var(--space-2xl);
  }
      .Grid_colGap_m_3xl {
    grid-column-gap: var(--space-3xl);
  }
      .Grid_colGap_m_4xl {
    grid-column-gap: var(--space-4xl);
  }
      .Grid_colGap_m_5xl {
    grid-column-gap: var(--space-5xl);
  }
      .Grid_colGap_m_6xl {
    grid-column-gap: var(--space-6xl);
  }
      .Grid_colGap_m_7xl {
    grid-column-gap: var(--space-7xl);
  }
      .Grid_colGap_m_8xl {
    grid-column-gap: var(--space-8xl);
  }
      .Grid_rowGap_m_0 {
    grid-row-gap: 0;
  }
      .Grid_rowGap_m_xs {
    grid-row-gap: var(--space-xs);
  }
      .Grid_rowGap_m_s {
    grid-row-gap: var(--space-s);
  }
      .Grid_rowGap_m_m {
    grid-row-gap: var(--space-m);
  }
      .Grid_rowGap_m_l {
    grid-row-gap: var(--space-l);
  }
      .Grid_rowGap_m_xl {
    grid-row-gap: var(--space-xl);
  }
      .Grid_rowGap_m_2xl {
    grid-row-gap: var(--space-2xl);
  }
      .Grid_rowGap_m_3xl {
    grid-row-gap: var(--space-3xl);
  }
      .Grid_rowGap_m_4xl {
    grid-row-gap: var(--space-4xl);
  }
      .Grid_rowGap_m_5xl {
    grid-row-gap: var(--space-5xl);
  }
      .Grid_rowGap_m_6xl {
    grid-row-gap: var(--space-6xl);
  }
      .Grid_rowGap_m_7xl {
    grid-row-gap: var(--space-7xl);
  }
      .Grid_rowGap_m_8xl {
    grid-row-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 (min-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_colGap_l_0 {
    grid-column-gap: 0;
  }
      .Grid_colGap_l_xs {
    grid-column-gap: var(--space-xs);
  }
      .Grid_colGap_l_s {
    grid-column-gap: var(--space-s);
  }
      .Grid_colGap_l_m {
    grid-column-gap: var(--space-m);
  }
      .Grid_colGap_l_l {
    grid-column-gap: var(--space-l);
  }
      .Grid_colGap_l_xl {
    grid-column-gap: var(--space-xl);
  }
      .Grid_colGap_l_2xl {
    grid-column-gap: var(--space-2xl);
  }
      .Grid_colGap_l_3xl {
    grid-column-gap: var(--space-3xl);
  }
      .Grid_colGap_l_4xl {
    grid-column-gap: var(--space-4xl);
  }
      .Grid_colGap_l_5xl {
    grid-column-gap: var(--space-5xl);
  }
      .Grid_colGap_l_6xl {
    grid-column-gap: var(--space-6xl);
  }
      .Grid_colGap_l_7xl {
    grid-column-gap: var(--space-7xl);
  }
      .Grid_colGap_l_8xl {
    grid-column-gap: var(--space-8xl);
  }
      .Grid_rowGap_l_0 {
    grid-row-gap: 0;
  }
      .Grid_rowGap_l_xs {
    grid-row-gap: var(--space-xs);
  }
      .Grid_rowGap_l_s {
    grid-row-gap: var(--space-s);
  }
      .Grid_rowGap_l_m {
    grid-row-gap: var(--space-m);
  }
      .Grid_rowGap_l_l {
    grid-row-gap: var(--space-l);
  }
      .Grid_rowGap_l_xl {
    grid-row-gap: var(--space-xl);
  }
      .Grid_rowGap_l_2xl {
    grid-row-gap: var(--space-2xl);
  }
      .Grid_rowGap_l_3xl {
    grid-row-gap: var(--space-3xl);
  }
      .Grid_rowGap_l_4xl {
    grid-row-gap: var(--space-4xl);
  }
      .Grid_rowGap_l_5xl {
    grid-row-gap: var(--space-5xl);
  }
      .Grid_rowGap_l_6xl {
    grid-row-gap: var(--space-6xl);
  }
      .Grid_rowGap_l_7xl {
    grid-row-gap: var(--space-7xl);
  }
      .Grid_rowGap_l_8xl {
    grid-row-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 (min-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 (min-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 (min-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 (min-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;
  }
  }