style-forge.media/src/mobile/gap.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (max-width: 600px) {
  /* var */
  .\@mob\:\$d\:i, .\@mob\:d\:f, .\@mob\:d\:g,
  .\@mob\:cols, .\@mob\:cols\:1, .\@mob\:cols\:2, .\@mob\:cols\:3, .\@mob\:cols\:4, .\@mob\:cols\:5, .\@mob\:cols\:6, .\@mob\:cols\:7, .\@mob\:cols\:8, .\@mob\:cols\:9, .\@mob\:cols\:10, .\@mob\:cols\:11, .\@mob\:cols\:12
  { --sf-gap-x: var(--sf-gap-x-sm); --sf-gap-y: var(--sf-gap-y-sm) }

  .\@mob\:d\:f\:x { --sf-gap-x: var(--sf-gap-x-sm) }
  .\@mob\:d\:f\:y { --sf-gap-y: var(--sf-gap-y-sm) }

  .\@mob\:d\:g\:x { --sf-gap-x: var(--sf-gap-x-sm) }
  .\@mob\:d\:g\:y { --sf-gap-y: var(--sf-gap-y-sm) }

  .\@mob\:gap\:0 { --sf-gap-x: 0em; --sf-gap-y: 0em }
  .\@mob\:gap\:x\:0 { --sf-gap-x: 0em } .\@mob\:gap\:y\:0 { --sf-gap-y: 0em }

  .\@mob\:gap { --sf-gap-x: var(--sf-gap-x-sm); --sf-gap-y: var(--sf-gap-y-sm) }
  .\@mob\:gap\:xs { --sf-gap-x: var(--sf-gap-x-xs); --sf-gap-y: var(--sf-gap-y-xs) }
  .\@mob\:gap\:sm { --sf-gap-x: var(--sf-gap-x-sm); --sf-gap-y: var(--sf-gap-y-sm) }
  .\@mob\:gap\:s { --sf-gap-x: var(--sf-gap-x-s); --sf-gap-y: var(--sf-gap-y-s) }
  .\@mob\:gap\:ms { --sf-gap-x: var(--sf-gap-x-ms); --sf-gap-y: var(--sf-gap-y-ms) }
  .\@mob\:gap\:ls { --sf-gap-x: var(--sf-gap-x-ls); --sf-gap-y: var(--sf-gap-y-ls) }
  .\@mob\:gap\:md { --sf-gap-x: var(--sf-gap-x-md); --sf-gap-y: var(--sf-gap-y-md) }
  .\@mob\:gap\:lg { --sf-gap-x: var(--sf-gap-x-lg); --sf-gap-y: var(--sf-gap-y-lg) }
  .\@mob\:gap\:xl { --sf-gap-x: var(--sf-gap-x-xl); --sf-gap-y: var(--sf-gap-y-xl) }
  .\@mob\:gap\:2xl { --sf-gap-x: var(--sf-gap-x-2xl); --sf-gap-y: var(--sf-gap-y-2xl) }
  .\@mob\:gap\:3xl { --sf-gap-x: var(--sf-gap-x-3xl); --sf-gap-y: var(--sf-gap-y-3xl) }
  .\@mob\:gap\:4xl { --sf-gap-x: var(--sf-gap-x-4xl); --sf-gap-y: var(--sf-gap-y-4xl) }
  .\@mob\:gap\:5xl { --sf-gap-x: var(--sf-gap-x-5xl); --sf-gap-y: var(--sf-gap-y-5xl) }
  .\@mob\:gap\:6xl { --sf-gap-x: var(--sf-gap-x-6xl); --sf-gap-y: var(--sf-gap-y-6xl) }
  .\@mob\:gap\:7xl { --sf-gap-x: var(--sf-gap-x-7xl); --sf-gap-y: var(--sf-gap-y-7xl) }
  .\@mob\:gap\:8xl { --sf-gap-x: var(--sf-gap-x-8xl); --sf-gap-y: var(--sf-gap-y-8xl) }
  .\@mob\:gap\:9xl { --sf-gap-x: var(--sf-gap-x-9xl); --sf-gap-y: var(--sf-gap-y-9xl) }
  .\@mob\:gap\:10xl { --sf-gap-x: var(--sf-gap-x-10xl); --sf-gap-y: var(--sf-gap-y-10xl) }
  .\@mob\:gap\:11xl { --sf-gap-x: var(--sf-gap-x-11xl); --sf-gap-y: var(--sf-gap-y-11xl) }
  .\@mob\:gap\:12xl { --sf-gap-x: var(--sf-gap-x-12xl); --sf-gap-y: var(--sf-gap-y-12xl) }

  .\@mob\:gap\:x { --sf-gap-x: var(--sf-gap-x-sm) } .\@mob\:gap\:y { --sf-gap-y: var(--sf-gap-y-sm) }
  .\@mob\:gap\:x\:xs { --sf-gap-x: var(--sf-gap-x-xs) } .\@mob\:gap\:y\:xs { --sf-gap-y: var(--sf-gap-y-xs) }
  .\@mob\:gap\:x\:sm { --sf-gap-x: var(--sf-gap-x-sm) } .\@mob\:gap\:y\:sm { --sf-gap-y: var(--sf-gap-y-sm) }
  .\@mob\:gap\:x\:s { --sf-gap-x: var(--sf-gap-x-s) } .\@mob\:gap\:y\:s { --sf-gap-y: var(--sf-gap-y-s) }
  .\@mob\:gap\:x\:ms { --sf-gap-x: var(--sf-gap-x-ms) } .\@mob\:gap\:y\:ms { --sf-gap-y: var(--sf-gap-y-ms) }
  .\@mob\:gap\:x\:ls { --sf-gap-x: var(--sf-gap-x-ls) } .\@mob\:gap\:y\:ls { --sf-gap-y: var(--sf-gap-y-ls) }
  .\@mob\:gap\:x\:md { --sf-gap-x: var(--sf-gap-x-md) } .\@mob\:gap\:y\:md { --sf-gap-y: var(--sf-gap-y-md) }
  .\@mob\:gap\:x\:lg { --sf-gap-x: var(--sf-gap-x-lg) } .\@mob\:gap\:y\:lg { --sf-gap-y: var(--sf-gap-y-lg) }
  .\@mob\:gap\:x\:xl { --sf-gap-x: var(--sf-gap-x-xl) } .\@mob\:gap\:y\:xl { --sf-gap-y: var(--sf-gap-y-xl) }
  .\@mob\:gap\:x\:2xl { --sf-gap-x: var(--sf-gap-x-2xl) } .\@mob\:gap\:y\:2xl { --sf-gap-y: var(--sf-gap-y-2xl) }
  .\@mob\:gap\:x\:3xl { --sf-gap-x: var(--sf-gap-x-3xl) } .\@mob\:gap\:y\:3xl { --sf-gap-y: var(--sf-gap-y-3xl) }
  .\@mob\:gap\:x\:4xl { --sf-gap-x: var(--sf-gap-x-4xl) } .\@mob\:gap\:y\:4xl { --sf-gap-y: var(--sf-gap-y-4xl) }
  .\@mob\:gap\:x\:5xl { --sf-gap-x: var(--sf-gap-x-5xl) } .\@mob\:gap\:y\:5xl { --sf-gap-y: var(--sf-gap-y-5xl) }
  .\@mob\:gap\:x\:6xl { --sf-gap-x: var(--sf-gap-x-6xl) } .\@mob\:gap\:y\:6xl { --sf-gap-y: var(--sf-gap-y-6xl) }
  .\@mob\:gap\:x\:7xl { --sf-gap-x: var(--sf-gap-x-7xl) } .\@mob\:gap\:y\:7xl { --sf-gap-y: var(--sf-gap-y-7xl) }
  .\@mob\:gap\:x\:8xl { --sf-gap-x: var(--sf-gap-x-8xl) } .\@mob\:gap\:y\:8xl { --sf-gap-y: var(--sf-gap-y-8xl) }
  .\@mob\:gap\:x\:9xl { --sf-gap-x: var(--sf-gap-x-9xl) } .\@mob\:gap\:y\:9xl { --sf-gap-y: var(--sf-gap-y-9xl) }
  .\@mob\:gap\:x\:10xl { --sf-gap-x: var(--sf-gap-x-10xl) } .\@mob\:gap\:y\:10xl { --sf-gap-y: var(--sf-gap-y-10xl) }
  .\@mob\:gap\:x\:11xl { --sf-gap-x: var(--sf-gap-x-11xl) } .\@mob\:gap\:y\:11xl { --sf-gap-y: var(--sf-gap-y-11xl) }
  .\@mob\:gap\:x\:12xl { --sf-gap-x: var(--sf-gap-x-12xl) } .\@mob\:gap\:y\:12xl { --sf-gap-y: var(--sf-gap-y-12xl) }

  /* gap */
  .\@mob\:gap,
  .\@mob\:gap\:xs,
  .\@mob\:gap\:sm,
  .\@mob\:gap\:s,
  .\@mob\:gap\:ms,
  .\@mob\:gap\:ls,
  .\@mob\:gap\:md,
  .\@mob\:gap\:lg,
  .\@mob\:gap\:xl,
  .\@mob\:gap\:2xl,
  .\@mob\:gap\:3xl,
  .\@mob\:gap\:4xl,
  .\@mob\:gap\:5xl,
  .\@mob\:gap\:6xl,
  .\@mob\:gap\:7xl,
  .\@mob\:gap\:8xl,
  .\@mob\:gap\:9xl,
  .\@mob\:gap\:10xl,
  .\@mob\:gap\:11xl,
  .\@mob\:gap\:12xl
  { margin-top: calc(var(--sf-gap-y) * -1); margin-left: calc(var(--sf-gap-x) * -1) }

  .\@mob\:gap\:x,
  .\@mob\:gap\:x\:xs,
  .\@mob\:gap\:x\:sm,
  .\@mob\:gap\:x\:s,
  .\@mob\:gap\:x\:ms,
  .\@mob\:gap\:x\:ls,
  .\@mob\:gap\:x\:md,
  .\@mob\:gap\:x\:lg,
  .\@mob\:gap\:x\:xl,
  .\@mob\:gap\:x\:2xl,
  .\@mob\:gap\:x\:3xl,
  .\@mob\:gap\:x\:4xl,
  .\@mob\:gap\:x\:5xl,
  .\@mob\:gap\:x\:6xl,
  .\@mob\:gap\:x\:7xl,
  .\@mob\:gap\:x\:8xl,
  .\@mob\:gap\:x\:9xl,
  .\@mob\:gap\:x\:10xl,
  .\@mob\:gap\:x\:11xl,
  .\@mob\:gap\:x\:12xl
  { margin-left: calc(var(--sf-gap-x) * -1) }

  .\@mob\:gap\:y,
  .\@mob\:gap\:y\:xs,
  .\@mob\:gap\:y\:sm,
  .\@mob\:gap\:y\:s,
  .\@mob\:gap\:y\:ms,
  .\@mob\:gap\:y\:ls,
  .\@mob\:gap\:y\:md,
  .\@mob\:gap\:y\:lg,
  .\@mob\:gap\:y\:xl,
  .\@mob\:gap\:y\:2xl,
  .\@mob\:gap\:y\:3xl,
  .\@mob\:gap\:y\:4xl,
  .\@mob\:gap\:y\:5xl,
  .\@mob\:gap\:y\:6xl,
  .\@mob\:gap\:y\:7xl,
  .\@mob\:gap\:y\:8xl,
  .\@mob\:gap\:y\:9xl,
  .\@mob\:gap\:y\:10xl,
  .\@mob\:gap\:y\:11xl,
  .\@mob\:gap\:y\:12xl
  { margin-top: calc(var(--sf-gap-y) * -1) }

  .\@mob\:gap > *,
  .\@mob\:gap\:xs > *,
  .\@mob\:gap\:sm > *,
  .\@mob\:gap\:s > *,
  .\@mob\:gap\:ms > *,
  .\@mob\:gap\:ls > *,
  .\@mob\:gap\:md > *,
  .\@mob\:gap\:lg > *,
  .\@mob\:gap\:xl > *,
  .\@mob\:gap\:2xl > *,
  .\@mob\:gap\:3xl > *,
  .\@mob\:gap\:4xl > *,
  .\@mob\:gap\:5xl > *,
  .\@mob\:gap\:6xl > *,
  .\@mob\:gap\:7xl > *,
  .\@mob\:gap\:8xl > *,
  .\@mob\:gap\:9xl > *,
  .\@mob\:gap\:10xl > *,
  .\@mob\:gap\:11xl > *,
  .\@mob\:gap\:12xl > *
  { margin-top: var(--sf-gap-y) }

  .\@mob\:gap > *,
  .\@mob\:gap\:xs > *,
  .\@mob\:gap\:sm > *,
  .\@mob\:gap\:s > *,
  .\@mob\:gap\:ms > *,
  .\@mob\:gap\:ls > *,
  .\@mob\:gap\:md > *,
  .\@mob\:gap\:lg > *,
  .\@mob\:gap\:xl > *,
  .\@mob\:gap\:2xl > *,
  .\@mob\:gap\:3xl > *,
  .\@mob\:gap\:4xl > *,
  .\@mob\:gap\:5xl > *,
  .\@mob\:gap\:6xl > *,
  .\@mob\:gap\:7xl > *,
  .\@mob\:gap\:8xl > *,
  .\@mob\:gap\:9xl > *,
  .\@mob\:gap\:10xl > *,
  .\@mob\:gap\:11xl > *,
  .\@mob\:gap\:12xl > *
  { margin-left: var(--sf-gap-x) }

  .\@mob\:gap\:x > *,
  .\@mob\:gap\:x\:xs > *,
  .\@mob\:gap\:x\:sm > *,
  .\@mob\:gap\:x\:s > *,
  .\@mob\:gap\:x\:ms > *,
  .\@mob\:gap\:x\:ls > *,
  .\@mob\:gap\:x\:md > *,
  .\@mob\:gap\:x\:lg > *,
  .\@mob\:gap\:x\:xl > *,
  .\@mob\:gap\:x\:2xl > *,
  .\@mob\:gap\:x\:3xl > *,
  .\@mob\:gap\:x\:4xl > *,
  .\@mob\:gap\:x\:5xl > *,
  .\@mob\:gap\:x\:6xl > *,
  .\@mob\:gap\:x\:7xl > *,
  .\@mob\:gap\:x\:8xl > *,
  .\@mob\:gap\:x\:9xl > *,
  .\@mob\:gap\:x\:10xl > *,
  .\@mob\:gap\:x\:11xl > *,
  .\@mob\:gap\:x\:12xl > *
  { margin-left: var(--sf-gap-x) }

  .\@mob\:gap\:y > *,
  .\@mob\:gap\:y\:xs > *,
  .\@mob\:gap\:y\:sm > *,
  .\@mob\:gap\:y\:s > *,
  .\@mob\:gap\:y\:ms > *,
  .\@mob\:gap\:y\:ls > *,
  .\@mob\:gap\:y\:md > *,
  .\@mob\:gap\:y\:lg > *,
  .\@mob\:gap\:y\:xl > *,
  .\@mob\:gap\:y\:2xl > *,
  .\@mob\:gap\:y\:3xl > *,
  .\@mob\:gap\:y\:4xl > *,
  .\@mob\:gap\:y\:5xl > *,
  .\@mob\:gap\:y\:6xl > *,
  .\@mob\:gap\:y\:7xl > *,
  .\@mob\:gap\:y\:8xl > *,
  .\@mob\:gap\:y\:9xl > *,
  .\@mob\:gap\:y\:10xl > *,
  .\@mob\:gap\:y\:11xl > *,
  .\@mob\:gap\:y\:12xl > *
  { margin-top: var(--sf-gap-y) }

  /* flex */
  .\@mob\:d\:f, .\@mob\:d\:f\:x, .\@mob\:d\:f\:y {
    row-gap: var(--sf-gap-y);
    column-gap: var(--sf-gap-x);
  }

  .\@mob\:d\:f, .\@mob\:d\:f\:x, .\@mob\:d\:f\:y,
  .\@mob\:d\:f > *, .\@mob\:d\:f\:x > *, .\@mob\:d\:f\:y > * {
    margin-top: calc(var(--sf-gap-y) * 0);
    margin-left: calc(var(--sf-gap-x) * 0);
  }

  .\@mob\:d\:f[class*="cols"] > [class*="col"],
  .\@mob\:d\:f\:x[class*="cols"] > [class*="col"],
  .\@mob\:d\:f\:y[class*="cols"] > [class*="col"]
  {
    width: calc(var(--col, 1) / var(--cols, 12) * 100% - var(--sf-gap-x) / var(--cols, 12) * (var(--cols, 12) - var(--col, 1)));
    padding-top: calc(var(--sf-gap-y) * 0);
    padding-left: calc(var(--sf-gap-x) * 0);
  }

  .\@mob\:d\:f[class*="cols"] > [class*="col:start"],
  .\@mob\:d\:f\:x[class*="cols"] > [class*="col:start"],
  .\@mob\:d\:f\:y[class*="cols"] > [class*="col:start"]
  { margin-left: calc((var(--cs, 1) - 1) / var(--cols, 12) * 100% + var(--sf-gap-x) * (var(--cs, 1) - 1) / var(--cols, 12)) }

  .\@mob\:d\:f[class*="cols"] > [class*="col:end"],
  .\@mob\:d\:f\:x[class*="cols"] > [class*="col:end"],
  .\@mob\:d\:f\:y[class*="cols"] > [class*="col:end"]
  { margin-right: calc((var(--ce, 1) - 1) / var(--cols, 12) * 100% + var(--sf-gap-x) * (var(--ce, 1) - 1) / var(--cols, 12)) }

  /* grid */
  .\@mob\:d\:g, .\@mob\:d\:g\:x, .\@mob\:d\:g\:y {
    row-gap: var(--sf-gap-y);
    column-gap: var(--sf-gap-x);
  }

  .\@mob\:d\:g, .\@mob\:d\:g\:x, .\@mob\:d\:g\:y,
  .\@mob\:d\:g > *, .\@mob\:d\:g\:x > *, .\@mob\:d\:g\:y > * {
    margin-top: calc(var(--sf-gap-y) * 0);
    margin-left: calc(var(--sf-gap-x) * 0);
  }

  /* gap zero for inline-block (UP) */
  .\@mob\:gap\:0 { margin-top: 0; margin-left: 0 }
  .\@mob\:gap\:x\:0 { margin-left: 0 }
  .\@mob\:gap\:y\:0 { margin-top: 0 }

  .\@mob\:gap\:0 > * { margin-top: 0; margin-left: 0 }
  .\@mob\:gap\:x\:0 > * { margin-left: 0 }
  .\@mob\:gap\:y\:0 > * { margin-top: 0 }

  /* inline */
  .\@mob\:\$d\:i {
    margin-top: calc(var(--sf-gap-y) * -1);
    margin-left: calc(var(--sf-gap-x) * -1);
  }
  .\@mob\:\$d\:i > * { margin-top: var(--sf-gap-y); margin-left: var(--sf-gap-x) }

  .\$d\:i > .\@mob\:\$d\:i,
  .\@mob\:\$d\:i > .\$d\:i,
  .\@mob\:\$d\:i > .\@mob\:\$d\:i,
  .\@mob\:\$d\:i > [class*='cols']
  {
    margin-top: calc(var(--sf-gap-y) * 0);
    margin-left: calc(var(--sf-gap-x) * 0);
  }

  /* cols */
  .\@mob\:cols,
  .\@mob\:cols\:1,
  .\@mob\:cols\:2,
  .\@mob\:cols\:3,
  .\@mob\:cols\:4,
  .\@mob\:cols\:5,
  .\@mob\:cols\:6,
  .\@mob\:cols\:7,
  .\@mob\:cols\:8,
  .\@mob\:cols\:9,
  .\@mob\:cols\:10,
  .\@mob\:cols\:11,
  .\@mob\:cols\:12
  { margin-top: calc(var(--sf-gap-y) * -1); margin-left: calc(var(--sf-gap-x) * -1) }

  html .\@mob\:col,
  html .\@mob\:col\:1,
  html .\@mob\:col\:2,
  html .\@mob\:col\:3,
  html .\@mob\:col\:4,
  html .\@mob\:col\:5,
  html .\@mob\:col\:6,
  html .\@mob\:col\:7,
  html .\@mob\:col\:8,
  html .\@mob\:col\:9,
  html .\@mob\:col\:10,
  html .\@mob\:col\:11,
  html .\@mob\:col\:12
  {
    margin-top: calc(var(--sf-gap-y) * 0);
    margin-left: calc(var(--sf-gap-x) * 0);
    padding-top: var(--sf-gap-y);
    padding-left: var(--sf-gap-x);
  }

  /* /// */

  /* flex */
  html.var .\@mob\:d\:f { margin-top: -8px; margin-left: -8px }
  html.var .\@mob\:d\:f > * { margin-top: 8px }
  html.var .\@mob\:d\:f > *:not([class*='col:start']) { margin-left: 8px }

  html.var .\@mob\:d\:f\:x { margin-left: -8px }
  html.var .\@mob\:d\:f\:x > *:not([class*='col:start']) { margin-left: 8px }

  html.var .\@mob\:d\:f\:y { margin-top: -8px }
  html.var .\@mob\:d\:f\:y > * { margin-top: 8px }

  html.var .d\:f > .\@mob\:\$d\:i, html.var .\@mob\:d\:f > .\$d\:i, html.var .\@mob\:d\:f > .\@mob\:\$d\:i,
  html.var .d\:f > .\@mob\:d\:f, html.var .\@mob\:d\:f > .d\:f, html.var .\@mob\:d\:f > .\@mob\:d\:f,
  html.var .d\:f > .\@mob\:d\:f\:x, html.var .\@mob\:d\:f > .d\:f\:x, html.var .\@mob\:d\:f > .\@mob\:d\:f\:x,
  html.var .d\:f > .\@mob\:d\:f\:y, html.var .\@mob\:d\:f > .d\:f\:y, html.var .\@mob\:d\:f > .\@mob\:d\:f\:y,
  html.var .d\:f > .\@mob\:d\:g, html.var .\@mob\:d\:f > .d\:g, html.var .\@mob\:d\:f > .\@mob\:g\:f,
  html.var .d\:f > .\@mob\:d\:g\:x, html.var .\@mob\:d\:f > .d\:g\:x, html.var .\@mob\:d\:f > .\@mob\:g\:f\:x,
  html.var .d\:f > .\@mob\:d\:g\:y, html.var .\@mob\:d\:f > .d\:g\:y, html.var .\@mob\:d\:f > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:f > [class*='cols']
  { margin-top: 0; margin-left: 0 }

  html.var .d\:f\:x > .\@mob\:\$d\:i, html.var .\@mob\:d\:f\:x > .\$d\:i, html.var .\@mob\:d\:f\:x > .\@mob\:\$d\:i,
  html.var .d\:f\:x > .\@mob\:d\:f, html.var .\@mob\:d\:f\:x > .d\:f, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f,
  html.var .d\:f\:x > .\@mob\:d\:f\:x, html.var .\@mob\:d\:f\:x > .d\:f\:x, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f\:x,
  html.var .d\:f\:x > .\@mob\:d\:f\:y, html.var .\@mob\:d\:f\:x > .d\:f\:y, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f\:y,
  html.var .d\:f\:x > .\@mob\:d\:g, html.var .\@mob\:d\:f\:x > .d\:g, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f,
  html.var .d\:f\:x > .\@mob\:d\:g\:x, html.var .\@mob\:d\:f\:x > .d\:g\:x, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f\:x,
  html.var .d\:f\:x > .\@mob\:d\:g\:y, html.var .\@mob\:d\:f\:x > .d\:g\:y, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:f\:x > [class*='cols']
  { margin-left: 0 }

  html.var .d\:f\:y > .\@mob\:\$d\:i, html.var .\@mob\:d\:f\:y > .\$d\:i, html.var .\@mob\:d\:f\:y > .\@mob\:\$d\:i,
  html.var .d\:f\:x > .\@mob\:d\:f, html.var .\@mob\:d\:f\:x > .d\:f, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f,
  html.var .d\:f\:x > .\@mob\:d\:f\:x, html.var .\@mob\:d\:f\:x > .d\:f\:x, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f\:x,
  html.var .d\:f\:x > .\@mob\:d\:f\:y, html.var .\@mob\:d\:f\:x > .d\:f\:y, html.var .\@mob\:d\:f\:x > .\@mob\:d\:f\:y,
  html.var .d\:f\:x > .\@mob\:d\:g, html.var .\@mob\:d\:f\:x > .d\:g, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f,
  html.var .d\:f\:x > .\@mob\:d\:g\:x, html.var .\@mob\:d\:f\:x > .d\:g\:x, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f\:x,
  html.var .d\:f\:x > .\@mob\:d\:g\:y, html.var .\@mob\:d\:f\:x > .d\:g\:y, html.var .\@mob\:d\:f\:x > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:f\:y > [class*='cols']
  { margin-top: 0 }

  /* grid */
  html.var .\@mob\:d\:g { margin-top: -8px; margin-left: -8px }
  html.var .\@mob\:d\:g > * { margin-top: 8px }
  html.var .\@mob\:d\:g > *:not([class*='col:start']) { margin-left: 8px }

  html.var .\@mob\:d\:g\:x { margin-left: -8px }
  html.var .\@mob\:d\:g\:x > *:not([class*='col:start']) { margin-left: 8px }

  html.var .\@mob\:d\:g\:y { margin-top: -8px }
  html.var .\@mob\:d\:g\:y > * { margin-top: 8px }

  html.var .d\:g\:x > .\@mob\:\$d\:i, html.var .\@mob\:d\:g\:x > .\$d\:i, html.var .\@mob\:d\:g\:x > .\@mob\:\$d\:i,
  html.var .d\:g\:x > .\@mob\:d\:f, html.var .\@mob\:d\:g\:x > .d\:f, html.var .\@mob\:d\:g\:x > .\@mob\:d\:f,
  html.var .d\:g\:x > .\@mob\:d\:f\:x, html.var .\@mob\:d\:g\:x > .d\:f\:x, html.var .\@mob\:d\:g\:x > .\@mob\:d\:f\:x,
  html.var .d\:g\:x > .\@mob\:d\:f\:y, html.var .\@mob\:d\:g\:x > .d\:f\:y, html.var .\@mob\:d\:g\:x > .\@mob\:d\:f\:y,
  html.var .d\:g\:x > .\@mob\:d\:g, html.var .\@mob\:d\:g\:x > .d\:g, html.var .\@mob\:d\:g\:x > .\@mob\:g\:f,
  html.var .d\:g\:x > .\@mob\:d\:g\:x, html.var .\@mob\:d\:g\:x > .d\:g\:x, html.var .\@mob\:d\:g\:x > .\@mob\:g\:f\:x,
  html.var .d\:g\:x > .\@mob\:d\:g\:y, html.var .\@mob\:d\:g\:x > .d\:g\:y, html.var .\@mob\:d\:g\:x > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:g\:x > [class*='cols']
  { margin-left: 0 }

  html.var .d\:g\:y > .\@mob\:\$d\:i, html.var .\@mob\:d\:g\:y > .\$d\:i, html.var .\@mob\:d\:g\:y > .\@mob\:\$d\:i,
  html.var .d\:g\:y > .\@mob\:d\:f, html.var .\@mob\:d\:g\:y > .d\:f, html.var .\@mob\:d\:g\:y > .\@mob\:d\:f,
  html.var .d\:g\:y > .\@mob\:d\:f\:x, html.var .\@mob\:d\:g\:y > .d\:f\:x, html.var .\@mob\:d\:g\:y > .\@mob\:d\:f\:x,
  html.var .d\:g\:y > .\@mob\:d\:f\:y, html.var .\@mob\:d\:g\:y > .d\:f\:y, html.var .\@mob\:d\:g\:y > .\@mob\:d\:f\:y,
  html.var .d\:g\:y > .\@mob\:d\:g, html.var .\@mob\:d\:g\:y > .d\:g, html.var .\@mob\:d\:g\:y > .\@mob\:g\:f,
  html.var .d\:g\:y > .\@mob\:d\:g\:x, html.var .\@mob\:d\:g\:y > .d\:g\:x, html.var .\@mob\:d\:g\:y > .\@mob\:g\:f\:x,
  html.var .d\:g\:y > .\@mob\:d\:g\:y, html.var .\@mob\:d\:g\:y > .d\:g\:y, html.var .\@mob\:d\:g\:y > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:g\:y > [class*='cols']
  { margin-top: 0 }

  html.var .d\:g > .\@mob\:\$d\:i, html.var .\@mob\:d\:g > .\$d\:i, html.var .\@mob\:d\:g > .\@mob\:\$d\:i,
  html.var .d\:g > .\@mob\:d\:f, html.var .\@mob\:d\:g > .d\:f, html.var .\@mob\:d\:g > .\@mob\:d\:f,
  html.var .d\:g > .\@mob\:d\:f\:x, html.var .\@mob\:d\:g > .d\:f\:x, html.var .\@mob\:d\:g > .\@mob\:d\:f\:x,
  html.var .d\:g > .\@mob\:d\:f\:y, html.var .\@mob\:d\:g > .d\:f\:y, html.var .\@mob\:d\:g > .\@mob\:d\:f\:y,
  html.var .d\:g > .\@mob\:d\:g, html.var .\@mob\:d\:g > .d\:g, html.var .\@mob\:d\:g > .\@mob\:g\:f,
  html.var .d\:g > .\@mob\:d\:g\:x, html.var .\@mob\:d\:g > .d\:g\:x, html.var .\@mob\:d\:g > .\@mob\:g\:f\:x,
  html.var .d\:g > .\@mob\:d\:g\:y, html.var .\@mob\:d\:g > .d\:g\:y, html.var .\@mob\:d\:g > .\@mob\:g\:f\:y,
  html.var .\@mob\:d\:g > [class*='cols']
  { margin-top: 0; margin-left: 0 }

  /* inline */
  html.var .\@mob\:\$d\:i { margin-top: -8px; margin-left: -8px }
  html.var .\@mob\:\$d\:i > * { margin-top: 8px; margin-left: 8px }

  html.var .\$d\:i > .\@mob\:\$d\:i, html.var .\@mob\:\$d\:i > .\$d\:i, html.var .\@mob\:\$d\:i > .\@mob\:\$d\:i,
  html.var .\$d\:i > .\@mob\:d\:f, html.var .\@mob\:\$d\:i > .d\:f, html.var .\@mob\:\$d\:i > .\@mob\:d\:f,
  html.var .\$d\:i > .\@mob\:d\:f\:x, html.var .\@mob\:\$d\:i > .d\:f\:x, html.var .\@mob\:\$d\:i > .\@mob\:d\:f\:x,
  html.var .\$d\:i > .\@mob\:d\:f\:y, html.var .\@mob\:\$d\:i > .d\:f\:y, html.var .\@mob\:\$d\:i > .\@mob\:d\:f\:y,
  html.var .\$d\:i > .\@mob\:d\:g, html.var .\@mob\:\$d\:i > .d\:g, html.var .\@mob\:\$d\:i > .\@mob\:d\:g,
  html.var .\$d\:i > .\@mob\:d\:g\:x, html.var .\@mob\:\$d\:i > .d\:g\:x, html.var .\@mob\:\$d\:i > .\@mob\:d\:g\:x,
  html.var .\$d\:i > .\@mob\:d\:g\:y, html.var .\@mob\:\$d\:i > .d\:g\:y, html.var .\@mob\:\$d\:i > .\@mob\:d\:g\:y,
  html.var .\@mob\:\$d\:i > [class*='cols']
  { margin-top: 0; margin-left: 0 }

  /* cols */
  html.var [class*='@mob:cols'] { margin-top: -8px; margin-left: -8px }
  html.var [class*='@mob:cols'] > [class*='col'] { margin-top: 0; padding-top: 8px; padding-left: 8px }
  html.var [class*='@mob:cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }

  html.var .\@mob\:gap[class*='cols'] > [class*='col'] { padding-top: 8px; padding-left: 8px }

  html.var .\@mob\:gap\:x[class*='cols'] { margin-left: -8px }
  html.var .\@mob\:gap\:x[class*='cols'] > [class*='col'] { padding-left: 8px }

  html.var .\@mob\:gap\:y[class*='cols'] { margin-top: -8px }
  html.var .\@mob\:gap\:y[class*='cols'] > [class*='col'] { padding-top: 8px }

  html.var .\@mob\:gap\:xs[class*='cols'] { margin-top: -4px; margin-left: -4px }
  html.var .\@mob\:gap\:sm[class*='cols'] { margin-top: -8px; margin-left: -8px }
  html.var .\@mob\:gap\:s[class*='cols'] { margin-top: -10px; margin-left: -10px }
  html.var .\@mob\:gap\:ms[class*='cols'] { margin-top: -12px; margin-left: -12px }
  html.var .\@mob\:gap\:ls[class*='cols'] { margin-top: -14px; margin-left: -14px }
  html.var .\@mob\:gap\:md[class*='cols'] { margin-top: -16px; margin-left: -16px }
  html.var .\@mob\:gap\:lg[class*='cols'] { margin-top: -18px; margin-left: -18px }
  html.var .\@mob\:gap\:xl[class*='cols'] { margin-top: -20px; margin-left: -20px }
  html.var .\@mob\:gap\:2xl[class*='cols'] { margin-top: -24px; margin-left: -24px }
  html.var .\@mob\:gap\:3xl[class*='cols'] { margin-top: -32px; margin-left: -32px }
  html.var .\@mob\:gap\:4xl[class*='cols'] { margin-top: -40px; margin-left: -40px }
  html.var .\@mob\:gap\:5xl[class*='cols'] { margin-top: -48px; margin-left: -48px }
  html.var .\@mob\:gap\:6xl[class*='cols'] { margin-top: -56px; margin-left: -56px }
  html.var .\@mob\:gap\:7xl[class*='cols'] { margin-top: -64px; margin-left: -64px }
  html.var .\@mob\:gap\:8xl[class*='cols'] { margin-top: -72px; margin-left: -72px }
  html.var .\@mob\:gap\:9xl[class*='cols'] { margin-top: -80px; margin-left: -80px }
  html.var .\@mob\:gap\:10xl[class*='cols'] { margin-top: -88px; margin-left: -88px }
  html.var .\@mob\:gap\:11xl[class*='cols'] { margin-top: -96px; margin-left: -96px }
  html.var .\@mob\:gap\:12xl[class*='cols'] { margin-top: -104px; margin-left: -104px }

  html.var .\@mob\:gap\:xs[class*='cols'] > [class*='col'] { padding-top: 4px; padding-left: 4px }
  html.var .\@mob\:gap\:sm[class*='cols'] > [class*='col'] { padding-top: 8px; padding-left: 8px }
  html.var .\@mob\:gap\:s[class*='cols'] > [class*='col'] { padding-top: 10px; padding-left: 10px }
  html.var .\@mob\:gap\:ms[class*='cols'] > [class*='col'] { padding-top: 12px; padding-left: 12px }
  html.var .\@mob\:gap\:ls[class*='cols'] > [class*='col'] { padding-top: 14px; padding-left: 14px }
  html.var .\@mob\:gap\:md[class*='cols'] > [class*='col'] { padding-top: 16px; padding-left: 16px }
  html.var .\@mob\:gap\:lg[class*='cols'] > [class*='col'] { padding-top: 18px; padding-left: 18px }
  html.var .\@mob\:gap\:xl[class*='cols'] > [class*='col'] { padding-top: 20px; padding-left: 20px }
  html.var .\@mob\:gap\:2xl[class*='cols'] > [class*='col'] { padding-top: 24px; padding-left: 24px }
  html.var .\@mob\:gap\:3xl[class*='cols'] > [class*='col'] { padding-top: 32px; padding-left: 32px }
  html.var .\@mob\:gap\:4xl[class*='cols'] > [class*='col'] { padding-top: 40px; padding-left: 40px }
  html.var .\@mob\:gap\:5xl[class*='cols'] > [class*='col'] { padding-top: 48px; padding-left: 48px }
  html.var .\@mob\:gap\:6xl[class*='cols'] > [class*='col'] { padding-top: 56px; padding-left: 56px }
  html.var .\@mob\:gap\:7xl[class*='cols'] > [class*='col'] { padding-top: 64px; padding-left: 64px }
  html.var .\@mob\:gap\:8xl[class*='cols'] > [class*='col'] { padding-top: 72px; padding-left: 72px }
  html.var .\@mob\:gap\:9xl[class*='cols'] > [class*='col'] { padding-top: 80px; padding-left: 80px }
  html.var .\@mob\:gap\:10xl[class*='cols'] > [class*='col'] { padding-top: 88px; padding-left: 88px }
  html.var .\@mob\:gap\:11xl[class*='cols'] > [class*='col'] { padding-top: 96px; padding-left: 96px }
  html.var .\@mob\:gap\:12xl[class*='cols'] > [class*='col'] { padding-top: 104px; padding-left: 104px }

  html.var .\@mob\:gap\:x\:xs[class*='cols'] { margin-left: -4px }
  html.var .\@mob\:gap\:x\:sm[class*='cols'] { margin-left: -8px }
  html.var .\@mob\:gap\:x\:s[class*='cols'] { margin-left: -10px }
  html.var .\@mob\:gap\:x\:ms[class*='cols'] { margin-left: -12px }
  html.var .\@mob\:gap\:x\:ls[class*='cols'] { margin-left: -14px }
  html.var .\@mob\:gap\:x\:md[class*='cols'] { margin-left: -16px }
  html.var .\@mob\:gap\:x\:lg[class*='cols'] { margin-left: -18px }
  html.var .\@mob\:gap\:x\:xl[class*='cols'] { margin-left: -20px }
  html.var .\@mob\:gap\:x\:2xl[class*='cols'] { margin-left: -24px }
  html.var .\@mob\:gap\:x\:3xl[class*='cols'] { margin-left: -32px }
  html.var .\@mob\:gap\:x\:4xl[class*='cols'] { margin-left: -40px }
  html.var .\@mob\:gap\:x\:5xl[class*='cols'] { margin-left: -48px }
  html.var .\@mob\:gap\:x\:6xl[class*='cols'] { margin-left: -56px }
  html.var .\@mob\:gap\:x\:7xl[class*='cols'] { margin-left: -64px }
  html.var .\@mob\:gap\:x\:8xl[class*='cols'] { margin-left: -72px }
  html.var .\@mob\:gap\:x\:9xl[class*='cols'] { margin-left: -80px }
  html.var .\@mob\:gap\:x\:10xl[class*='cols'] { margin-left: -88px }
  html.var .\@mob\:gap\:x\:11xl[class*='cols'] { margin-left: -96px }
  html.var .\@mob\:gap\:x\:12xl[class*='cols'] { margin-left: -104px }

  html.var .\@mob\:gap\:x\:xs[class*='cols'] > [class*='col'] { padding-left: 4px }
  html.var .\@mob\:gap\:x\:sm[class*='cols'] > [class*='col'] { padding-left: 8px }
  html.var .\@mob\:gap\:x\:s[class*='cols'] > [class*='col'] { padding-left: 10px }
  html.var .\@mob\:gap\:x\:ms[class*='cols'] > [class*='col'] { padding-left: 12px }
  html.var .\@mob\:gap\:x\:ls[class*='cols'] > [class*='col'] { padding-left: 14px }
  html.var .\@mob\:gap\:x\:md[class*='cols'] > [class*='col'] { padding-left: 16px }
  html.var .\@mob\:gap\:x\:lg[class*='cols'] > [class*='col'] { padding-left: 18px }
  html.var .\@mob\:gap\:x\:xl[class*='cols'] > [class*='col'] { padding-left: 20px }
  html.var .\@mob\:gap\:x\:2xl[class*='cols'] > [class*='col'] { padding-left: 24px }
  html.var .\@mob\:gap\:x\:3xl[class*='cols'] > [class*='col'] { padding-left: 32px }
  html.var .\@mob\:gap\:x\:4xl[class*='cols'] > [class*='col'] { padding-left: 40px }
  html.var .\@mob\:gap\:x\:5xl[class*='cols'] > [class*='col'] { padding-left: 48px }
  html.var .\@mob\:gap\:x\:6xl[class*='cols'] > [class*='col'] { padding-left: 56px }
  html.var .\@mob\:gap\:x\:7xl[class*='cols'] > [class*='col'] { padding-left: 64px }
  html.var .\@mob\:gap\:x\:8xl[class*='cols'] > [class*='col'] { padding-left: 72px }
  html.var .\@mob\:gap\:x\:9xl[class*='cols'] > [class*='col'] { padding-left: 80px }
  html.var .\@mob\:gap\:x\:10xl[class*='cols'] > [class*='col'] { padding-left: 88px }
  html.var .\@mob\:gap\:x\:11xl[class*='cols'] > [class*='col'] { padding-left: 96px }
  html.var .\@mob\:gap\:x\:12xl[class*='cols'] > [class*='col'] { padding-left: 104px }

  html.var .\@mob\:gap\:y\:xs[class*='cols'] { margin-top: -4px }
  html.var .\@mob\:gap\:y\:sm[class*='cols'] { margin-top: -8px }
  html.var .\@mob\:gap\:y\:s[class*='cols'] { margin-top: -10px }
  html.var .\@mob\:gap\:y\:ms[class*='cols'] { margin-top: -12px }
  html.var .\@mob\:gap\:y\:ls[class*='cols'] { margin-top: -14px }
  html.var .\@mob\:gap\:y\:md[class*='cols'] { margin-top: -16px }
  html.var .\@mob\:gap\:y\:lg[class*='cols'] { margin-top: -18px }
  html.var .\@mob\:gap\:y\:xl[class*='cols'] { margin-top: -20px }
  html.var .\@mob\:gap\:y\:2xl[class*='cols'] { margin-top: -24px }
  html.var .\@mob\:gap\:y\:3xl[class*='cols'] { margin-top: -32px }
  html.var .\@mob\:gap\:y\:4xl[class*='cols'] { margin-top: -40px }
  html.var .\@mob\:gap\:y\:5xl[class*='cols'] { margin-top: -48px }
  html.var .\@mob\:gap\:y\:6xl[class*='cols'] { margin-top: -56px }
  html.var .\@mob\:gap\:y\:7xl[class*='cols'] { margin-top: -64px }
  html.var .\@mob\:gap\:y\:8xl[class*='cols'] { margin-top: -72px }
  html.var .\@mob\:gap\:y\:9xl[class*='cols'] { margin-top: -80px }
  html.var .\@mob\:gap\:y\:10xl[class*='cols'] { margin-top: -88px }
  html.var .\@mob\:gap\:y\:11xl[class*='cols'] { margin-top: -96px }
  html.var .\@mob\:gap\:y\:12xl[class*='cols'] { margin-top: -104px }

  html.var .\@mob\:gap\:y\:xs[class*='cols'] > [class*='col'] { padding-top: 4px }
  html.var .\@mob\:gap\:y\:sm[class*='cols'] > [class*='col'] { padding-top: 8px }
  html.var .\@mob\:gap\:y\:s[class*='cols'] > [class*='col'] { padding-top: 10px }
  html.var .\@mob\:gap\:y\:ms[class*='cols'] > [class*='col'] { padding-top: 12px }
  html.var .\@mob\:gap\:y\:ls[class*='cols'] > [class*='col'] { padding-top: 14px }
  html.var .\@mob\:gap\:y\:md[class*='cols'] > [class*='col'] { padding-top: 16px }
  html.var .\@mob\:gap\:y\:lg[class*='cols'] > [class*='col'] { padding-top: 18px }
  html.var .\@mob\:gap\:y\:xl[class*='cols'] > [class*='col'] { padding-top: 20px }
  html.var .\@mob\:gap\:y\:2xl[class*='cols'] > [class*='col'] { padding-top: 24px }
  html.var .\@mob\:gap\:y\:3xl[class*='cols'] > [class*='col'] { padding-top: 32px }
  html.var .\@mob\:gap\:y\:4xl[class*='cols'] > [class*='col'] { padding-top: 40px }
  html.var .\@mob\:gap\:y\:5xl[class*='cols'] > [class*='col'] { padding-top: 48px }
  html.var .\@mob\:gap\:y\:6xl[class*='cols'] > [class*='col'] { padding-top: 56px }
  html.var .\@mob\:gap\:y\:7xl[class*='cols'] > [class*='col'] { padding-top: 64px }
  html.var .\@mob\:gap\:y\:8xl[class*='cols'] > [class*='col'] { padding-top: 72px }
  html.var .\@mob\:gap\:y\:9xl[class*='cols'] > [class*='col'] { padding-top: 80px }
  html.var .\@mob\:gap\:y\:10xl[class*='cols'] > [class*='col'] { padding-top: 88px }
  html.var .\@mob\:gap\:y\:11xl[class*='cols'] > [class*='col'] { padding-top: 96px }
  html.var .\@mob\:gap\:y\:12xl[class*='cols'] > [class*='col'] { padding-top: 104px }

  html.var .\@mob\:gap\:0[class*='cols'] { margin-top: 0; margin-left: 0 }
  html.var .\@mob\:gap\:0[class*='cols'] > [class*='col'] { padding-top: 0; padding-left: 0 }

  html.var .\@mob\:gap\:x\:0[class*='cols'] { margin-left: 0 }
  html.var .\@mob\:gap\:x\:0[class*='cols'] > [class*='col'] { padding-left: 0 }

  html.var .\@mob\:gap\:y\:0[class*='cols'] { margin-top: 0 }
  html.var .\@mob\:gap\:y\:0[class*='cols'] > [class*='col'] { padding-top: 0 }

  /* gap */
  html.var .\@mob\:gap\:0 { margin-top: 0; margin-left: 0 }
  html.var .\@mob\:gap\:0 > * { margin-top: 0 }
  html.var .\@mob\:gap\:0 > *:not([class*='col:start']) { margin-left: 0 }

  html.var .\@mob\:gap\:x\:0 { margin-left: 0 }
  html.var .\@mob\:gap\:x\:0 > *:not([class*='col:start']) { margin-left: 0 }

  html.var .\@mob\:gap\:y\:0 { margin-top: 0 }
  html.var .\@mob\:gap\:y\:0 > * { margin-top: 0 }

  html.var .\@mob\:gap { margin-top: -8px; margin-left: -8px }
  html.var .\@mob\:gap > * { margin-top: 8px } html.var .\@mob\:gap > *:not([class*='col:start']) { margin-left: 8px }
  html.var .\@mob\:gap\:x { margin-left: -8px } html.var .\@mob\:gap\:x > *:not([class*='col:start']) { margin-left: 8px }
  html.var .\@mob\:gap\:y { margin-top: -8px } html.var .\@mob\:gap\:y > * { margin-top: 8px }

  html.var .\@mob\:gap\:xs { margin-top: -4px; margin-left: -4px } html.var .\@mob\:gap\:xs > * { margin-top: 4px } html.var .\@mob\:gap\:xs > *:not([class*='col:start']) { margin-left: 4px }
  html.var .\@mob\:gap\:sm { margin-top: -8px; margin-left: -8px } html.var .\@mob\:gap\:sm > * { margin-top: 8px } html.var .\@mob\:gap\:sm > *:not([class*='col:start']) { margin-left: 8px }
  html.var .\@mob\:gap\:s { margin-top: -10px; margin-left: -10px } html.var .\@mob\:gap\:s > * { margin-top: 10px } html.var .\@mob\:gap\:s > *:not([class*='col:start']) { margin-top: 10px }
  html.var .\@mob\:gap\:ms { margin-top: -12px; margin-left: -12px } html.var .\@mob\:gap\:ms > * { margin-top: 12px } html.var .\@mob\:gap\:ms > *:not([class*='col:start']) { margin-left: 12px }
  html.var .\@mob\:gap\:ls { margin-top: -14px; margin-left: -14px } html.var .\@mob\:gap\:ls > * { margin-top: 14px } html.var .\@mob\:gap\:ls > *:not([class*='col:start']) { margin-left: 14px }
  html.var .\@mob\:gap\:md { margin-top: -16px; margin-left: -16px } html.var .\@mob\:gap\:md > * { margin-top: 16px } html.var .\@mob\:gap\:md > *:not([class*='col:start']) { margin-left: 16px }
  html.var .\@mob\:gap\:lg { margin-top: -18px; margin-left: -18px } html.var .\@mob\:gap\:lg > * { margin-top: 18px } html.var .\@mob\:gap\:lg > *:not([class*='col:start']) { margin-left: 18px }
  html.var .\@mob\:gap\:xl { margin-top: -20px; margin-left: -20px } html.var .\@mob\:gap\:xl > * { margin-top: 20px } html.var .\@mob\:gap\:xl > *:not([class*='col:start']) { margin-left: 20px }
  html.var .\@mob\:gap\:2xl { margin-top: -24px; margin-left: -24px } html.var .\@mob\:gap\:2xl > * { margin-top: 24px } html.var .\@mob\:gap\:2xl > *:not([class*='col:start']) { margin-left: 24px }
  html.var .\@mob\:gap\:3xl { margin-top: -32px; margin-left: -32px } html.var .\@mob\:gap\:3xl > * { margin-top: 32px } html.var .\@mob\:gap\:3xl > *:not([class*='col:start']) { margin-left: 32px }
  html.var .\@mob\:gap\:4xl { margin-top: -40px; margin-left: -40px } html.var .\@mob\:gap\:4xl > * { margin-top: 40px } html.var .\@mob\:gap\:4xl > *:not([class*='col:start']) { margin-left: 40px }
  html.var .\@mob\:gap\:5xl { margin-top: -48px; margin-left: -48px } html.var .\@mob\:gap\:5xl > * { margin-top: 48px } html.var .\@mob\:gap\:5xl > *:not([class*='col:start']) { margin-left: 48px }
  html.var .\@mob\:gap\:6xl { margin-top: -56px; margin-left: -56px } html.var .\@mob\:gap\:6xl > * { margin-top: 56px } html.var .\@mob\:gap\:6xl > *:not([class*='col:start']) { margin-left: 56px }
  html.var .\@mob\:gap\:7xl { margin-top: -64px; margin-left: -64px } html.var .\@mob\:gap\:7xl > * { margin-top: 64px } html.var .\@mob\:gap\:7xl > *:not([class*='col:start']) { margin-left: 64px }
  html.var .\@mob\:gap\:8xl { margin-top: -72px; margin-left: -72px } html.var .\@mob\:gap\:8xl > * { margin-top: 72px } html.var .\@mob\:gap\:8xl > *:not([class*='col:start']) { margin-left: 72px }
  html.var .\@mob\:gap\:9xl { margin-top: -80px; margin-left: -80px } html.var .\@mob\:gap\:9xl > * { margin-top: 80px } html.var .\@mob\:gap\:9xl > *:not([class*='col:start']) { margin-left: 80px }
  html.var .\@mob\:gap\:10xl { margin-top: -88px; margin-left: -88px } html.var .\@mob\:gap\:10xl > * { margin-top: 88px } html.var .\@mob\:gap\:10xl > *:not([class*='col:start']) { margin-left: 88px }
  html.var .\@mob\:gap\:11xl { margin-top: -96px; margin-left: -96px } html.var .\@mob\:gap\:11xl > * { margin-top: 96px } html.var .\@mob\:gap\:11xl > *:not([class*='col:start']) { margin-left: 96px }
  html.var .\@mob\:gap\:12xl { margin-top: -104px; margin-left: -104px } html.var .\@mob\:gap\:12xl > * { margin-top: 104px } html.var .\@mob\:gap\:12xl > *:not([class*='col:start']) { margin-left: 104px }

  html.var .\@mob\:gap\:x\:xs { margin-left: -4px } html.var .\@mob\:gap\:x\:xs > *:not([class*='col:start']) { margin-left: 4px }
  html.var .\@mob\:gap\:x\:sm { margin-left: -8px } html.var .\@mob\:gap\:x\:sm > *:not([class*='col:start']) { margin-left: 8px }
  html.var .\@mob\:gap\:x\:s { margin-left: -10px } html.var .\@mob\:gap\:x\:s > *:not([class*='col:start']) { margin-left: 10px }
  html.var .\@mob\:gap\:x\:ms { margin-left: -12px } html.var .\@mob\:gap\:x\:ms > *:not([class*='col:start']) { margin-left: 12px }
  html.var .\@mob\:gap\:x\:ls { margin-left: -14px } html.var .\@mob\:gap\:x\:ls > *:not([class*='col:start']) { margin-left: 14px }
  html.var .\@mob\:gap\:x\:md { margin-left: -16px } html.var .\@mob\:gap\:x\:md > *:not([class*='col:start']) { margin-left: 16px }
  html.var .\@mob\:gap\:x\:lg { margin-left: -18px } html.var .\@mob\:gap\:x\:lg > *:not([class*='col:start']) { margin-left: 18px }
  html.var .\@mob\:gap\:x\:xl { margin-left: -20px } html.var .\@mob\:gap\:x\:xl > *:not([class*='col:start']) { margin-left: 20px }
  html.var .\@mob\:gap\:x\:2xl { margin-left: -24px } html.var .\@mob\:gap\:x\:2xl > *:not([class*='col:start']) { margin-left: 24px }
  html.var .\@mob\:gap\:x\:3xl { margin-left: -32px } html.var .\@mob\:gap\:x\:3xl > *:not([class*='col:start']) { margin-left: 32px }
  html.var .\@mob\:gap\:x\:4xl { margin-left: -40px } html.var .\@mob\:gap\:x\:4xl > *:not([class*='col:start']) { margin-left: 40px }
  html.var .\@mob\:gap\:x\:5xl { margin-left: -48px } html.var .\@mob\:gap\:x\:5xl > *:not([class*='col:start']) { margin-left: 48px }
  html.var .\@mob\:gap\:x\:6xl { margin-left: -56px } html.var .\@mob\:gap\:x\:6xl > *:not([class*='col:start']) { margin-left: 56px }
  html.var .\@mob\:gap\:x\:7xl { margin-left: -64px } html.var .\@mob\:gap\:x\:7xl > *:not([class*='col:start']) { margin-left: 64px }
  html.var .\@mob\:gap\:x\:8xl { margin-left: -72px } html.var .\@mob\:gap\:x\:8xl > *:not([class*='col:start']) { margin-left: 72px }
  html.var .\@mob\:gap\:x\:9xl { margin-left: -80px } html.var .\@mob\:gap\:x\:9xl > *:not([class*='col:start']) { margin-left: 80px }
  html.var .\@mob\:gap\:x\:10xl { margin-left: -88px } html.var .\@mob\:gap\:x\:10xl > *:not([class*='col:start']) { margin-left: 88px }
  html.var .\@mob\:gap\:x\:11xl { margin-left: -96px } html.var .\@mob\:gap\:x\:11xl > *:not([class*='col:start']) { margin-left: 96px }
  html.var .\@mob\:gap\:x\:12xl { margin-left: -104px } html.var .\@mob\:gap\:x\:12xl > *:not([class*='col:start']) { margin-left: 104px }

  html.var .\@mob\:gap\:y\:xs { margin-top: -4px } html.var .\@mob\:gap\:y\:xs > * { margin-top: 4px }
  html.var .\@mob\:gap\:y\:sm { margin-top: -8px } html.var .\@mob\:gap\:y\:sm > * { margin-top: 8px }
  html.var .\@mob\:gap\:y\:s { margin-top: -10px } html.var .\@mob\:gap\:y\:s > * { margin-top: 10px }
  html.var .\@mob\:gap\:y\:ms { margin-top: -12px } html.var .\@mob\:gap\:y\:ms > * { margin-top: 12px }
  html.var .\@mob\:gap\:y\:ls { margin-top: -14px } html.var .\@mob\:gap\:y\:ls > * { margin-top: 14px }
  html.var .\@mob\:gap\:y\:md { margin-top: -16px } html.var .\@mob\:gap\:y\:md > * { margin-top: 16px }
  html.var .\@mob\:gap\:y\:lg { margin-top: -18px } html.var .\@mob\:gap\:y\:lg > * { margin-top: 18px }
  html.var .\@mob\:gap\:y\:xl { margin-top: -20px } html.var .\@mob\:gap\:y\:xl > * { margin-top: 20px }
  html.var .\@mob\:gap\:y\:2xl { margin-top: -24px } html.var .\@mob\:gap\:y\:2xl > * { margin-top: 24px }
  html.var .\@mob\:gap\:y\:3xl { margin-top: -32px } html.var .\@mob\:gap\:y\:3xl > * { margin-top: 32px }
  html.var .\@mob\:gap\:y\:4xl { margin-top: -40px } html.var .\@mob\:gap\:y\:4xl > * { margin-top: 40px }
  html.var .\@mob\:gap\:y\:5xl { margin-top: -48px } html.var .\@mob\:gap\:y\:5xl > * { margin-top: 48px }
  html.var .\@mob\:gap\:y\:6xl { margin-top: -56px } html.var .\@mob\:gap\:y\:6xl > * { margin-top: 56px }
  html.var .\@mob\:gap\:y\:7xl { margin-top: -64px } html.var .\@mob\:gap\:y\:7xl > * { margin-top: 64px }
  html.var .\@mob\:gap\:y\:8xl { margin-top: -72px } html.var .\@mob\:gap\:y\:8xl > * { margin-top: 72px }
  html.var .\@mob\:gap\:y\:9xl { margin-top: -80px } html.var .\@mob\:gap\:y\:9xl > * { margin-top: 80px }
  html.var .\@mob\:gap\:y\:10xl { margin-top: -88px } html.var .\@mob\:gap\:y\:10xl > * { margin-top: 88px }
  html.var .\@mob\:gap\:y\:11xl { margin-top: -96px } html.var .\@mob\:gap\:y\:11xl > * { margin-top: 96px }
  html.var .\@mob\:gap\:y\:12xl { margin-top: -104px } html.var .\@mob\:gap\:y\:12xl > * { margin-top: 104px }
}