style-forge.media/src/mobile/columns/items.css

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

@media only screen and (max-width: 600px) {
  [class*='cols'].\@mob\:reverse:not(.ltr),
  [class*='cols'].\@mob\:reverse\:wrap:not(.ltr)
  { direction: rtl }

  [class*='cols'].\@mob\:reverse > *:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap > *:not(.rtl)
  { direction: ltr }

  /* flex */
  .\@mob\:d\:f[class*='cols'], .\@mob\:d\:f\:x[class*='cols'], .\@mob\:d\:f\:y[class*='cols'] { margin: 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%) }

  .\@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%) }

  .\@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%) }

  [class*='cols'].reverse.\@mob\:d\:f:not(.rtl),
  [class*='cols'].reverse.\@mob\:d\:f\:x:not(.rtl),
  [class*='cols'].reverse.\@mob\:d\:f\:y:not(.rtl),
  [class*='cols'].reverse\:wrap.\@mob\:d\:f:not(.rtl),
  [class*='cols'].reverse\:wrap.\@mob\:d\:f\:x:not(.rtl),
  [class*='cols'].reverse\:wrap.\@mob\:d\:f\:y:not(.rtl),

  [class*='cols'].\@mob\:reverse.d\:f:not(.rtl),
  [class*='cols'].\@mob\:reverse.d\:f\:x:not(.rtl),
  [class*='cols'].\@mob\:reverse.d\:f\:y:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.d\:f:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.d\:f\:x:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.d\:f\:y:not(.rtl),

  [class*='cols'].\@mob\:reverse.\@mob\:d\:f:not(.rtl),
  [class*='cols'].\@mob\:reverse.\@mob\:d\:f\:x:not(.rtl),
  [class*='cols'].\@mob\:reverse.\@mob\:d\:f\:y:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f\:x:not(.rtl),
  [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f\:y:not(.rtl)
  { direction: ltr }

  /* grid */
  .\@mob\:d\:g[class*='cols'], .\@mob\:d\:g\:x[class*='cols'], .\@mob\:d\:g\:y[class*='cols'] { margin: 0 }

  .\@mob\:d\:g[class*='cols'] > *, .\@mob\:d\:g\:x[class*='cols'] > *, .\@mob\:d\:g\:y[class*='cols'] > *,
  .\@mob\:d\:g[class*='rows'] > *, .\@mob\:d\:g\:x[class*='rows'] > *, .\@mob\:d\:g\:y[class*='rows'] > *
  {
    --sf-grid-width: auto;
    width: var(--sf-grid-width);

    margin-top: calc(var(--sf-gap-y) * 0);
    margin-left: calc(var(--sf-gap-x) * 0);
    margin-right: calc(var(--sf-gap-x) * 0);
    padding-top: calc(var(--sf-gap-y) * 0);
    padding-left: calc(var(--sf-gap-x) * 0);
  }

  /* /// */

  html.var [class*='cols'].reverse.\@mob\:d\:f\:y:not(.ltr),
  html.var [class*='cols'].reverse\:wrap.\@mob\:d\:f\:y:not(.ltr),
  html.var [class*='cols'].\@mob\:reverse.d\:f\:y:not(.ltr),
  html.var [class*='cols'].\@mob\:reverse\:wrap.d\:f\:y:not(.ltr),
  html.var [class*='cols'].\@mob\:reverse.\@mob\:d\:f\:y:not(.ltr),
  html.var [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f\:y:not(.ltr),

  html.flex [class*='cols'].reverse.\@mob\:d\:f:not(.ltr),
  html.flex [class*='cols'].reverse.\@mob\:d\:f\:x:not(.ltr),
  html.flex [class*='cols'].reverse.\@mob\:d\:f\:y:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:f:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:f\:x:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:f\:y:not(.ltr),

  html.flex [class*='cols'].\@mob\:reverse.d\:f:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.d\:f\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.d\:f\:y:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:f:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:f\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:f\:y:not(.ltr),

  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:f:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:f\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:f\:y:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:f\:y:not(.ltr)
  { direction: rtl }

  html.grid [class*='cols'].reverse.\@mob\:d\:g:not(.rtl),
  html.grid [class*='cols'].reverse.\@mob\:d\:g\:x:not(.rtl),
  html.grid [class*='cols'].reverse.\@mob\:d\:g\:y:not(.rtl),
  html.grid [class*='cols'].reverse\:wrap.\@mob\:d\:g:not(.rtl),
  html.grid [class*='cols'].reverse\:wrap.\@mob\:d\:g\:x:not(.rtl),
  html.grid [class*='cols'].reverse\:wrap.\@mob\:d\:g\:y:not(.rtl),

  html.grid [class*='cols'].\@mob\:reverse.d\:g:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse.d\:g\:x:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse.d\:g\:y:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.d\:g:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.d\:g\:x:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.d\:g\:y:not(.rtl),

  html.grid [class*='cols'].\@mob\:reverse.\@mob\:d\:g:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse.\@mob\:d\:g\:x:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse.\@mob\:d\:g\:y:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g\:x:not(.rtl),
  html.grid [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g\:y:not(.rtl)
  { direction: ltr }

  html.flex [class*='cols'].reverse.\@mob\:d\:g:not(.ltr),
  html.flex [class*='cols'].reverse.\@mob\:d\:g\:x:not(.ltr),
  html.flex [class*='cols'].reverse.\@mob\:d\:g\:y:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:g:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:g\:x:not(.ltr),
  html.flex [class*='cols'].reverse\:wrap.\@mob\:d\:g\:y:not(.ltr),

  html.flex [class*='cols'].\@mob\:reverse.d\:g:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.d\:g\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.d\:g\:y:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:g:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:g\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.d\:g\:y:not(.ltr),

  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:g:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:g\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse.\@mob\:d\:g\:y:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g\:x:not(.ltr),
  html.flex [class*='cols'].\@mob\:reverse\:wrap.\@mob\:d\:g\:y:not(.ltr)
  { direction: rtl }
}