:root {
    --fontSize: 12px;
    --row-gap: var(--lineHeight);
    --col-gap: var(--lineHeight);
  }
  
  * {
    grid-column: 1 / -1;
    align-self: start;
  }
  
  /* has internal division or is "container" element */ 
  [dx*="/"], div, header, nav, footer, main, section {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--col-gap, 0);
    row-gap: var(--row-gap, 0);
    align-items: baseline;
  }

  /* flex */
  [dx~="/flex"], [dx-items~="/flex"] { display: flex; }
  [dx~="grow"], [dx-items~="grow"] { flex-grow: 1; }
  
  /* columns */
  [dx~="/1"] { grid-template-columns: repeat(1, 1fr) }
  [dx~="/2"] { grid-template-columns: repeat(2, 1fr) }
  [dx~="/3"] { grid-template-columns: repeat(3, 1fr) }
  [dx~="/4"] { grid-template-columns: repeat(4, 1fr) }
  [dx~="/5"] { grid-template-columns: repeat(5, 1fr) }
  [dx~="/6"] { grid-template-columns: repeat(6, 1fr) }
  [dx~="/7"] { grid-template-columns: repeat(7, 1fr) }
  [dx~="/8"] { grid-template-columns: repeat(8, 1fr) }
  [dx~="/9"] { grid-template-columns: repeat(9, 1fr) }
  [dx~="/10"] { grid-template-columns: repeat(10, 1fr) }
  [dx~="/11"] { grid-template-columns: repeat(11, 1fr) }
  [dx~="/12"] { grid-template-columns: repeat(12, 1fr) }
  
  /* span */
  [dx~="auto"], [dx-items~="auto"] > * { grid-column: auto; }
  [dx~="1"],  [dx-items~="1"] > * { grid-column: span 1 / span 1; }
  [dx~="2"], [dx-items~="2"] > *  { grid-column: span 2 / span 2; }
  [dx~="3"], [dx-items~="3"] > * { grid-column: span 3 / span 3; }
  [dx~="4"], [dx-items~="4"] > * { grid-column: span 4 / span 4; }
  [dx~="5"], [dx-items~="5"] > * { grid-column: span 5 / span 5; }
  [dx~="6"], [dx-items~="6"] > * { grid-column: span 6 / span 6; }
  [dx~="7"], [dx-items~="7"] > * { grid-column: span 7 / span 7; }
  [dx~="8"], [dx-items~="8"] > * { grid-column: span 8 / span 8; }
  [dx~="9"], [dx-items~="9"] > * { grid-column: span 9 / span 9; }
  [dx~="10"], [dx-items~="10"] > * { grid-column: span 10 / span 10; }
  [dx~="11"], [dx-items~="11"] > * { grid-column: span 11 / span 11; }
  [dx~="12"], [dx-items~="12"] > * { grid-column: span 12 / span 12; }
  [dx~="full"], [dx-items~="full"] > * {	grid-column: 1 / -1; }
  
  /* start */
  [dx~="auto."], [dx-items~="auto."] > * { grid-column-start: auto; }
  [dx~="1."], [dx-items~="1."] > * { grid-column-start: 1; }
  [dx~="2."], [dx-items~="2."] > * { grid-column-start: 2; }
  [dx~="3."], [dx-items~="3."] > * { grid-column-start: 3; }
  [dx~="4."], [dx-items~="4."] > * { grid-column-start: 4; }
  [dx~="5."], [dx-items~="5."] > * { grid-column-start: 5; }
  [dx~="6."], [dx-items~="6."] > * { grid-column-start: 6; }
  [dx~="7."], [dx-items~="7."] > * { grid-column-start: 7; }
  [dx~="8."], [dx-items~="8."] > * { grid-column-start: 8; }
  [dx~="9."], [dx-items~="9."] > * { grid-column-start: 9; }
  [dx~="10."], [dx-items~="10."] > * { grid-column-start: 10; }
  [dx~="11."], [dx-items~="11."] > * { grid-column-start: 11; }
  [dx~="12."], [dx-items~="12."] > * { grid-column-start: 12; }
  [dx~="13."], [dx-items~="13."] > * { grid-column-start: 13; }
  
  /* end */
  [dx~=".auto"], [dx-items~=".auto"] > * { grid-column-end: auto; }
  [dx~=".1"], [dx-items~=".1"] > * { grid-column-end: 1; }
  [dx~=".2"], [dx-items~=".2"] > * { grid-column-end: 2; }
  [dx~=".3"], [dx-items~=".3"] > * { grid-column-end: 3; }
  [dx~=".4"], [dx-items~=".4"] > * { grid-column-end: 4; }
  [dx~=".5"], [dx-items~=".5"] > * { grid-column-end: 5; }
  [dx~=".6"], [dx-items~=".6"] > * { grid-column-end: 6; }
  [dx~=".7"], [dx-items~=".7"] > * { grid-column-end: 7; }
  [dx~=".8"], [dx-items~=".8"] > * { grid-column-end: 8; }
  [dx~=".9"], [dx-items~=".9"] > * { grid-column-end: 9; }
  [dx~=".10"], [dx-items~=".10"] > * { grid-column-end: 10; }
  [dx~=".11"], [dx-items~=".11"] > * { grid-column-end: 11; }
  [dx~=".12"], [dx-items~=".12"] > * { grid-column-end: 12; }
  [dx~=".13"], [dx-items~=".13"] > * { grid-column-end: 13; }
  
  /* 
    TODO: seems like a gap: 0; still adds a 1px space which 
    causes inconsitencies in layout alginment when multiple 
    gap values are mixed. A -1px gap value seems to correspond 
    to a "true" no-space between items.
  */
  [dx~="xgap-0"], [dx-items~="xgap-0"] > * { --col-gap: 0; }
  [dx~="ygap-0"], [dx-items~="ygap-0"] > * { --row-gap: 0; }
  [dx~="xgap-0.5"], [dx-items~="xgap-0.5"] > * { --col-gap: calc(var(--lineHeight) * 0.5); }
  [dx~="ygap-0.5"], [dx-items~="ygap-0.5"] > * { --row-gap: calc(var(--lineHeight) * 0.5); }
  [dx~="xgap-1"], [dx-items~="xgap-1"] > * { --col-gap: var(--lineHeight); }
  [dx~="ygap-1"], [dx-items~="ygap-1"] > * { --row-gap: var(--lineHeight); }

@media only screen and (max-width: 639px) { 
  /* has internal division or is "container" element */ 
  [dx-sm*="/"], div, header, nav, footer, main {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--col-gap, 0);
    row-gap: var(--row-gap, 0);
    align-items: baseline;
  }

  /* columns */
  [dx-sm~="/1"] { grid-template-columns: repeat(1, 1fr) }
  [dx-sm~="/2"] { grid-template-columns: repeat(2, 1fr) }
  [dx-sm~="/3"] { grid-template-columns: repeat(3, 1fr) }
  [dx-sm~="/4"] { grid-template-columns: repeat(4, 1fr) }
  [dx-sm~="/5"] { grid-template-columns: repeat(5, 1fr) }
  [dx-sm~="/6"] { grid-template-columns: repeat(6, 1fr) }
  [dx-sm~="/7"] { grid-template-columns: repeat(7, 1fr) }
  [dx-sm~="/8"] { grid-template-columns: repeat(8, 1fr) }
  [dx-sm~="/9"] { grid-template-columns: repeat(9, 1fr) }
  [dx-sm~="/10"] { grid-template-columns: repeat(10, 1fr) }
  [dx-sm~="/11"] { grid-template-columns: repeat(11, 1fr) }
  [dx-sm~="/12"] { grid-template-columns: repeat(12, 1fr) }
  
  /* span */
  [dx-sm~="auto"], [dx-items-sm~="auto"] > * { grid-column: auto; }
  [dx-sm~="1"],  [dx-items-sm~="1"] > * { grid-column: span 1 / span 1; }
  [dx-sm~="2"], [dx-items-sm~="2"] > *  { grid-column: span 2 / span 2; }
  [dx-sm~="3"], [dx-items-sm~="3"] > * { grid-column: span 3 / span 3; }
  [dx-sm~="4"], [dx-items-sm~="4"] > * { grid-column: span 4 / span 4; }
  [dx-sm~="5"], [dx-items-sm~="5"] > * { grid-column: span 5 / span 5; }
  [dx-sm~="6"], [dx-items-sm~="6"] > * { grid-column: span 6 / span 6; }
  [dx-sm~="7"], [dx-items-sm~="7"] > * { grid-column: span 7 / span 7; }
  [dx-sm~="8"], [dx-items-sm~="8"] > * { grid-column: span 8 / span 8; }
  [dx-sm~="9"], [dx-items-sm~="9"] > * { grid-column: span 9 / span 9; }
  [dx-sm~="10"], [dx-items-sm~="10"] > * { grid-column: span 10 / span 10; }
  [dx-sm~="11"], [dx-items-sm~="11"] > * { grid-column: span 11 / span 11; }
  [dx-sm~="12"], [dx-items-sm~="12"] > * { grid-column: span 12 / span 12; }
  [dx-sm~="full"], [dx-items-sm~="full"] > * {	grid-column: 1 / -1; }
  
  /* start */
  [dx-sm~="auto."], [dx-items-sm~="auto."] > * { grid-column-start: auto; }
  [dx-sm~="1."], [dx-items-sm~="1."] > * { grid-column-start: 1; }
  [dx-sm~="2."], [dx-items-sm~="2."] > * { grid-column-start: 2; }
  [dx-sm~="3."], [dx-items-sm~="3."] > * { grid-column-start: 3; }
  [dx-sm~="4."], [dx-items-sm~="4."] > * { grid-column-start: 4; }
  [dx-sm~="5."], [dx-items-sm~="5."] > * { grid-column-start: 5; }
  [dx-sm~="6."], [dx-items-sm~="6."] > * { grid-column-start: 6; }
  [dx-sm~="7."], [dx-items-sm~="7."] > * { grid-column-start: 7; }
  [dx-sm~="8."], [dx-items-sm~="8."] > * { grid-column-start: 8; }
  [dx-sm~="9."], [dx-items-sm~="9."] > * { grid-column-start: 9; }
  [dx-sm~="10."], [dx-items-sm~="10."] > * { grid-column-start: 10; }
  [dx-sm~="11."], [dx-items-sm~="11."] > * { grid-column-start: 11; }
  [dx-sm~="12."], [dx-items-sm~="12."] > * { grid-column-start: 12; }
  [dx-sm~="13."], [dx-items-sm~="13."] > * { grid-column-start: 13; }
  
  /* end */
  [dx-sm~=".auto"], [dx-items-sm~=".auto"] > * { grid-column-end: auto; }
  [dx-sm~=".1"], [dx-items-sm~=".1"] > * { grid-column-end: 1; }
  [dx-sm~=".2"], [dx-items-sm~=".2"] > * { grid-column-end: 2; }
  [dx-sm~=".3"], [dx-items-sm~=".3"] > * { grid-column-end: 3; }
  [dx-sm~=".4"], [dx-items-sm~=".4"] > * { grid-column-end: 4; }
  [dx-sm~=".5"], [dx-items-sm~=".5"] > * { grid-column-end: 5; }
  [dx-sm~=".6"], [dx-items-sm~=".6"] > * { grid-column-end: 6; }
  [dx-sm~=".7"], [dx-items-sm~=".7"] > * { grid-column-end: 7; }
  [dx-sm~=".8"], [dx-items-sm~=".8"] > * { grid-column-end: 8; }
  [dx-sm~=".9"], [dx-items-sm~=".9"] > * { grid-column-end: 9; }
  [dx-sm~=".10"], [dx-items-sm~=".10"] > * { grid-column-end: 10; }
  [dx-sm~=".11"], [dx-items-sm~=".11"] > * { grid-column-end: 11; }
  [dx-sm~=".12"], [dx-items-sm~=".12"] > * { grid-column-end: 12; }
  [dx-sm~=".13"], [dx-items-sm~=".13"] > * { grid-column-end: 13; }

  [dx-sm~="xgap-0"], [dx-items-sm~="xgap-0"] > * { --col-gap: 0; }
  [dx-sm~="ygap-0"], [dx-items-sm~="ygap-0"] > * { --row-gap: 0; }
  [dx-sm~="xgap-0.5"], [dx-items-sm~="xgap-0.5"] > * { --col-gap: calc(var(--lineHeight) * 0.5); }
  [dx-sm~="ygap-0.5"], [dx-items-sm~="ygap-0.5"] > * { --row-gap: calc(var(--lineHeight) * 0.5); }
  [dx-sm~="xgap-1"], [dx-items-sm~="xgap-1"] > * { --col-gap: var(--lineHeight); }
  [dx-sm~="ygap-1"], [dx-items-sm~="ygap-1"] > * { --row-gap: var(--lineHeight); }
}

@media only screen and (min-width: 1599px) { 
  /* has internal division or is "container" element */ 
  [dx-lg*="/"], div, header, nav, footer, main {
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--col-gap, 0);
    row-gap: var(--row-gap, 0);
    align-items: baseline;
  }

  /* columns */
  [dx-lg~="/1"] { grid-template-columns: repeat(1, 1fr) }
  [dx-lg~="/2"] { grid-template-columns: repeat(2, 1fr) }
  [dx-lg~="/3"] { grid-template-columns: repeat(3, 1fr) }
  [dx-lg~="/4"] { grid-template-columns: repeat(4, 1fr) }
  [dx-lg~="/5"] { grid-template-columns: repeat(5, 1fr) }
  [dx-lg~="/6"] { grid-template-columns: repeat(6, 1fr) }
  [dx-lg~="/7"] { grid-template-columns: repeat(7, 1fr) }
  [dx-lg~="/8"] { grid-template-columns: repeat(8, 1fr) }
  [dx-lg~="/9"] { grid-template-columns: repeat(9, 1fr) }
  [dx-lg~="/10"] { grid-template-columns: repeat(10, 1fr) }
  [dx-lg~="/11"] { grid-template-columns: repeat(11, 1fr) }
  [dx-lg~="/12"] { grid-template-columns: repeat(12, 1fr) }
  
  /* span */
  [dx-lg~="auto"], [dx-items-lg~="auto"] > * { grid-column: auto; }
  [dx-lg~="1"],  [dx-items-lg~="1"] > * { grid-column: span 1 / span 1; }
  [dx-lg~="2"], [dx-items-lg~="2"] > *  { grid-column: span 2 / span 2; }
  [dx-lg~="3"], [dx-items-lg~="3"] > * { grid-column: span 3 / span 3; }
  [dx-lg~="4"], [dx-items-lg~="4"] > * { grid-column: span 4 / span 4; }
  [dx-lg~="5"], [dx-items-lg~="5"] > * { grid-column: span 5 / span 5; }
  [dx-lg~="6"], [dx-items-lg~="6"] > * { grid-column: span 6 / span 6; }
  [dx-lg~="7"], [dx-items-lg~="7"] > * { grid-column: span 7 / span 7; }
  [dx-lg~="8"], [dx-items-lg~="8"] > * { grid-column: span 8 / span 8; }
  [dx-lg~="9"], [dx-items-lg~="9"] > * { grid-column: span 9 / span 9; }
  [dx-lg~="10"], [dx-items-lg~="10"] > * { grid-column: span 10 / span 10; }
  [dx-lg~="11"], [dx-items-lg~="11"] > * { grid-column: span 11 / span 11; }
  [dx-lg~="12"], [dx-items-lg~="12"] > * { grid-column: span 12 / span 12; }
  [dx-lg~="full"], [dx-items-lg~="full"] > * {	grid-column: 1 / -1; }
  
  /* start */
  [dx-lg~="auto."], [dx-items-lg~="auto."] > * { grid-column-start: auto; }
  [dx-lg~="1."], [dx-items-lg~="1."] > * { grid-column-start: 1; }
  [dx-lg~="2."], [dx-items-lg~="2."] > * { grid-column-start: 2; }
  [dx-lg~="3."], [dx-items-lg~="3."] > * { grid-column-start: 3; }
  [dx-lg~="4."], [dx-items-lg~="4."] > * { grid-column-start: 4; }
  [dx-lg~="5."], [dx-items-lg~="5."] > * { grid-column-start: 5; }
  [dx-lg~="6."], [dx-items-lg~="6."] > * { grid-column-start: 6; }
  [dx-lg~="7."], [dx-items-lg~="7."] > * { grid-column-start: 7; }
  [dx-lg~="8."], [dx-items-lg~="8."] > * { grid-column-start: 8; }
  [dx-lg~="9."], [dx-items-lg~="9."] > * { grid-column-start: 9; }
  [dx-lg~="10."], [dx-items-lg~="10."] > * { grid-column-start: 10; }
  [dx-lg~="11."], [dx-items-lg~="11."] > * { grid-column-start: 11; }
  [dx-lg~="12."], [dx-items-lg~="12."] > * { grid-column-start: 12; }
  [dx-lg~="13."], [dx-items-lg~="13."] > * { grid-column-start: 13; }
  
  /* end */
  [dx-lg~=".auto"], [dx-items-lg~=".auto"] > * { grid-column-end: auto; }
  [dx-lg~=".1"], [dx-items-lg~=".1"] > * { grid-column-end: 1; }
  [dx-lg~=".2"], [dx-items-lg~=".2"] > * { grid-column-end: 2; }
  [dx-lg~=".3"], [dx-items-lg~=".3"] > * { grid-column-end: 3; }
  [dx-lg~=".4"], [dx-items-lg~=".4"] > * { grid-column-end: 4; }
  [dx-lg~=".5"], [dx-items-lg~=".5"] > * { grid-column-end: 5; }
  [dx-lg~=".6"], [dx-items-lg~=".6"] > * { grid-column-end: 6; }
  [dx-lg~=".7"], [dx-items-lg~=".7"] > * { grid-column-end: 7; }
  [dx-lg~=".8"], [dx-items-lg~=".8"] > * { grid-column-end: 8; }
  [dx-lg~=".9"], [dx-items-lg~=".9"] > * { grid-column-end: 9; }
  [dx-lg~=".10"], [dx-items-lg~=".10"] > * { grid-column-end: 10; }
  [dx-lg~=".11"], [dx-items-lg~=".11"] > * { grid-column-end: 11; }
  [dx-lg~=".12"], [dx-items-lg~=".12"] > * { grid-column-end: 12; }
  [dx-lg~=".13"], [dx-items-lg~=".13"] > * { grid-column-end: 13; }

  [dx-lg~="xgap-0"], [dx-items-lg~="xgap-0"] > * { --col-gap: 0; }
  [dx-lg~="ygap-0"], [dx-items-lg~="ygap-0"] > * { --row-gap: 0; }
  [dx-lg~="xgap-0.5"], [dx-items-lg~="xgap-0.5"] > * { --col-gap: calc(var(--lineHeight) * 0.5); }
  [dx-lg~="ygap-0.5"], [dx-items-lg~="ygap-0.5"] > * { --row-gap: calc(var(--lineHeight) * 0.5); }
  [dx-lg~="xgap-1"], [dx-items-lg~="xgap-1"] > * { --col-gap: var(--lineHeight); }
  [dx-lg~="ygap-1"], [dx-items-sm~="ygap-1"] > * { --row-gap: var(--lineHeight); }
}