/* Review cards on the tint: 1 / 3 columns. */
.rev{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rev .grid2{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
.rev .q{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.rev .q p{margin-bottom:12px}
.rev .q small{color:var(--ink-2)}
.rev .stars{color:var(--star);letter-spacing:2px;margin-bottom:8px;font-size:.9rem}
/* Unearned stars in the muted gray, not --line: that tint is near-invisible on the card's --bg-3, so 4 of 5 would read as 4. */
.rev .stars__off{color:var(--ink-2)}
/* Twin of layout.css `.head` row-gap:0 (P-032): the rating line has no tap box, so it brings its own space for when it wraps.
   On one line align-items:end keeps it bottom-aligned, and 16px plus a text line is shorter than the rule + h2, so nothing moves. */
.rev .head > .muted{padding-top:16px}

@media(min-width:768px){ /* breakpoint: tablet */
  .rev .grid2{grid-template-columns:repeat(3,1fr)}
}