Sections and cards: three grids, two quiet panels and five headings become three names

Counted first, as with the last sweep. A grid of cards was written three times with three different sets
of breakpoints and gaps, so cards on different pages lined up differently for no reason anyone chose. A
tinted aside card existed twice, hand-rolled, with different borders. A section heading existed five ways:
centred with one margin, centred with another, left-aligned with a blurb, left without.

Now `card-grid`, `panel-quiet` and a `section-head` fragment (with a cream-on-sage twin for the dark
bands). The catering small print and the contact page's "ordering for a crowd?" card are the same object
now, which is what they always were.

TWO THINGS THE SCREENSHOTS DECIDED, not taste:

Three prices go three-up from md, while the shared card grid waits for lg. A grid of photos is fine
two-wide; three prices are a comparison, and 2 + 1 on a laptop strands the third size on its own row.

And the per-table column count is entirely in one classappend rather than overriding `card-grid`, because
Tailwind emits grid-cols-1, -2, -3 in that order — so a `grid-cols-3` from the shared class beats a
`grid-cols-2` written beside it in the markup, whatever the markup says. Two classes for one property,
winner decided by the stylesheet: the same trap that stopped `hidden` from hiding the open-now line, and I
had already written it before catching it. A one-size and a two-size table were both wrong; proved the fix
by building a real two-size table through the admin and looking at it, then deleting it again.

61 tests.

src/main/styles/components.css

@@ -147,6 +147,25 @@
   @apply bg-bakery-50/70 border-b border-bakery-200/70;
 }
 
+/*
+ * A card that is holding an aside rather than the thing you came for: the small print under a price
+ * table, a pointer to another page. Tinted and bordered, no shadow, so it sits ON the page instead of
+ * above it and does not compete with the cards it follows. There were two hand-rolled versions of this
+ * before it had a name, and they had different borders.
+ */
+@utility panel-quiet {
+  @apply rounded-panel border border-bakery-200/70 bg-bakery-50/60;
+}
+
+/*
+ * A grid of cards. It was written three times with three different sets of breakpoints and gaps — the
+ * homepage went to three columns at md, the catering tables at lg, the catalogue at lg with a wider gap —
+ * so cards on different pages lined up differently for no reason anyone chose.
+ */
+@utility card-grid {
+  @apply grid gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3;
+}
+
 /*
  * The branch, laid into a corner at the weight of a watermark. It is the one mark that is unmistakably
  * this shop, and at this size and colour it is texture rather than decoration.