/* ==========================================================================
   PLOP! — the grid classes, and nothing else.

   This file is the CSS half of tools/grid.json. A photograph is given ONE of
   these classes and that class decides its width; the same class decided its
   `sizes` attribute and the widths the encoder wrote. Keeping the three facts
   in one place is the point — in the earlier landings two cards standing side
   by side in the same row carried different hand-written sizes strings, because
   each was measured off the mock-up separately.

   If a layout needs a width none of these describes, the answer is a new grid
   in tools/grid.json, not a one-off width in a chapter stylesheet.
   ========================================================================== */

/* full viewport, edge to edge — sizes: 100vw */
.g-bleed { width: 100%; }

/* the table's content measure — sizes: (min-width: 1320px) 1200px, 92vw */
.g-wide { width: var(--measure); max-width: 100%; }

/* one of two, side by side over 900px — sizes: (min-width: 900px) 46vw, 88vw */
.g-half { width: 88vw; max-width: 100%; }
@media (min-width: 900px) { .g-half { width: 46vw; } }

/* one of three over 900px, two-up below — sizes: (min-width: 900px) 30vw, 60vw */
.g-third { width: 60vw; max-width: 100%; }
@media (min-width: 900px) { .g-third { width: 30vw; } }

/* a portrait crop for phones only — sizes: 100vw */
.g-phone { width: 100%; }

/* a print in the pile — sizes: (min-width: 900px) 520px, 82vw */
.g-card { width: 82vw; max-width: 100%; }
@media (min-width: 900px) { .g-card { width: 520px; } }

/* a small torn scrap — sizes: (min-width: 900px) 260px, 40vw */
.g-chip { width: 40vw; max-width: 100%; }
@media (min-width: 900px) { .g-chip { width: 260px; } }

/* Every grid holds its own aspect box so nothing on the table jumps when a
   photograph finishes loading. The intrinsic width/height are on the <img>;
   these two rules stop a stylesheet from overriding them by accident. */
.g-bleed img, .g-wide img, .g-half img, .g-third img,
.g-phone img, .g-card img, .g-chip img { width: 100%; height: auto; display: block; }

.g-bleed picture, .g-wide picture, .g-half picture, .g-third picture,
.g-phone picture, .g-card picture, .g-chip picture { display: block; }