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

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

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .\@tab\:d\:g, .\@tab\:d\:g\:x, .\@tab\:d\:g\:y {
    display: grid;

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

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

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

  /* /// */

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

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

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

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

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

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