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

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

@media only screen and (max-width: 600px) {
  .\@mob\:d\:g, .\@mob\:d\:g\:x, .\@mob\:d\:g\:y {
    display: grid;

    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    letter-spacing: normal;
  }

  .\@mob\:d\:g, .wrap.\@mob\:d\:g, .\@mob\:wrap.d\:g, .\@mob\:wrap.\@mob\:d\:g { grid-auto-flow: dense }
  .\@mob\:d\:g\:x, .wrap.\@mob\:d\:g, .\@mob\:wrap.d\:g, .\@mob\:wrap.\@mob\:d\:g { grid-auto-flow: dense column }
  .\@mob\:d\:g\:y, .wrap.\@mob\:d\:g, .\@mob\:wrap.d\:g, .\@mob\:wrap.\@mob\:d\:g { grid-auto-flow: dense row }

  .nowrap.\@mob\:d\:g\:x,
  .nowrap.\@mob\:d\:g,
  .\@mob\:nowrap.d\:g\:x,
  .\@mob\:nowrap.d\:g,
  .\@mob\:nowrap.\@mob\:d\:g\:x,
  .\@mob\:nowrap.\@mob\:d\:g
  { grid-auto-flow: column }
  .nowrap.\@mob\:d\:g\:y,
  .\@mob\:nowrap.d\:g\:y,
  .\@mob\:nowrap.\@mob\:d\:g\:y
  { grid-auto-flow: row }

  /* /// */

  html.grid .\@mob\:d\:g, html.grid .\@mob\:d\:g\:x, html.grid .\@mob\:d\:g\:y { display: flex; flex-wrap: wrap }
  html.grid .\@mob\:d\:g\:x, html.grid .\@mob\:d\:g\:y { flex-wrap: nowrap }

  html.grid .\@mob\:d\:g\:x { flex-direction: row }
  html.grid .\@mob\:d\:g\:y { flex-direction: column }

  html.grid .wrap.\@mob\:d\:g, html.grid .\@mob\:wrap.d\:g, html.grid .\@mob\:wrap.\@mob\:d\:g,
  html.grid .wrap.\@mob\:d\:g\:x, html.grid .\@mob\:wrap.d\:g\:x, html.grid .\@mob\:wrap.\@mob\:d\:g\:x,
  html.grid .wrap.\@mob\:d\:g\:y, html.grid .\@mob\:wrap.d\:g\:y, html.grid .\@mob\:wrap.\@mob\:d\:g\:y
  { flex-wrap: wrap }

  html.grid .nowrap.\@mob\:d\:g, html.grid .\@mob\:nowrap.d\:g, html.grid .\@mob\:nowrap.\@mob\:d\:g,
  html.grid .nowrap.\@mob\:d\:g\:x, html.grid .\@mob\:nowrap.d\:g\:x, html.grid .\@mob\:nowrap.\@mob\:d\:g\:x,
  html.grid .nowrap.\@mob\:d\:g\:y, html.grid .\@mob\:nowrap.d\:g\:y, html.grid .\@mob\:nowrap.\@mob\:d\:g\:y
  { flex-wrap: nowrap }

  html.flex .\@mob\:d\:g, html.flex .\@mob\:d\:g\:x, html.flex .\@mob\:d\:g\:y { display: block; letter-spacing: -1em !important }
  html.flex .\@mob\:d\:g > *, html.flex .\@mob\:d\:g\:x > *, html.flex .\@mob\:d\:g\:y > * { letter-spacing: normal; vertical-align: top }
  html.flex .\@mob\:d\:g > *, html.flex .\@mob\:d\:g\:x > * { display: inline-block }
  html.flex .\@mob\:d\:g\:y > * { display: block }

  html.flex .d\:f > .\@mob\:d\:g, html.flex .d\:f > .\@mob\:d\:g\:x, html.flex .d\:f > .\@mob\:d\:g\:y,
  html.flex .d\:g > .\@mob\:d\:g, html.flex .d\:g > .\@mob\:d\:g\:x, html.flex .d\:g > .\@mob\:d\:g\:y,
  html.flex .\@mob\:d\:f > .d\:g, html.flex .\@mob\:d\:f > .d\:g\:x, html.flex .\@mob\:d\:f > .d\:g\:y,
  html.flex .\@mob\:d\:g > .d\:g, html.flex .\@mob\:d\:g > .d\:g\:x, html.flex .\@mob\:d\:g > .d\:g\:y,
  html.flex .\@mob\:d\:f > .\@mob\:d\:g, html.flex .\@mob\:d\:f > .\@mob\:d\:g\:x, html.flex .\@mob\:d\:f > .\@mob\:d\:g\:y,
  html.flex .\@mob\:d\:g > .\@mob\:d\:g, html.flex .\@mob\:d\:g > .\@mob\:d\:g\:x, html.flex .\@mob\:d\:g > .\@mob\:d\:g\:y,
  html.flex .d\:f\:x > .\@mob\:d\:g, html.flex .d\:f\:x > .\@mob\:d\:g\:x, html.flex .d\:f\:x > .\@mob\:d\:g\:y,
  html.flex .d\:g\:x > .\@mob\:d\:g, html.flex .d\:g\:x > .\@mob\:d\:g\:x, html.flex .d\:g\:x > .\@mob\:d\:g\:y,
  html.flex .\@mob\:d\:f\:x > .d\:g, html.flex .\@mob\:d\:f\:x > .d\:g\:x, html.flex .\@mob\:d\:f\:x > .d\:g\:y,
  html.flex .\@mob\:d\:g\:x > .d\:g, html.flex .\@mob\:d\:g\:x > .d\:g\:x, html.flex .\@mob\:d\:g\:x > .d\:g\:y,
  html.flex .\@mob\:d\:f\:x > .\@mob\:d\:g, html.flex .\@mob\:d\:f\:x > .\@mob\:d\:g\:x, html.flex .\@mob\:d\:f\:x > .\@mob\:d\:g\:y,
  html.flex .\@mob\:d\:g\:x > .\@mob\:d\:g, html.flex .\@mob\:d\:g\:x > .\@mob\:d\:g\:x, html.flex .\@mob\:d\:g\:x > .\@mob\:d\:g\:y
  { display: inline-block }
}