/*
 * Counts the approved design was never drawn for.
 *
 * site.css lays the 保障範疇 grid out for exactly five cards and exactly two —
 * the numbers Direction 2 was drawn with — and says so in its own comment. The
 * client can now add and remove entries, so a group can hold three, or eight,
 * and those land with no span rule at all: one column of a six-column grid,
 * which looks broken.
 *
 * This file is the WordPress layer's answer to that, and it lives here rather
 * than in site.css for the same reason forms.css does: site.css is synced from
 * docs/directions/ and the WordPress build never edits the approved design.
 * The two drawn counts are deliberately absent below — they stay site.css's.
 *
 * The shape follows the original: three-up on the widest grid, two-up under
 * 1080px, one-up under 640px.
 */
.lob-grid.is-1 > .lob-card{ grid-column:span 6; }
.lob-grid.is-4 > .lob-card{ grid-column:span 3; }
.lob-grid.is-3 > .lob-card,
.lob-grid.is-6 > .lob-card,
.lob-grid.is-7 > .lob-card,
.lob-grid.is-8 > .lob-card,
.lob-grid.is-9 > .lob-card{ grid-column:span 2; }

@media (max-width:1080px){
  .lob-grid.is-1 > .lob-card,
  .lob-grid.is-3 > .lob-card,
  .lob-grid.is-4 > .lob-card,
  .lob-grid.is-6 > .lob-card,
  .lob-grid.is-7 > .lob-card,
  .lob-grid.is-8 > .lob-card,
  .lob-grid.is-9 > .lob-card{ grid-column:span 3; }
}
@media (max-width:640px){
  .lob-grid.is-1 > .lob-card,
  .lob-grid.is-3 > .lob-card,
  .lob-grid.is-4 > .lob-card,
  .lob-grid.is-6 > .lob-card,
  .lob-grid.is-7 > .lob-card,
  .lob-grid.is-8 > .lob-card,
  .lob-grid.is-9 > .lob-card{ grid-column:span 6; }
}