Site: center the Get-Started difficulty cards as a group

The 4 difficulty cards used `repeat(auto-fit, minmax(220px, 1fr))`,
which let each card stretch to fill 1/4 of the section's max-width
on wide viewports. With h2 and section-lead above sitting at their
natural text width, the stretched cards read as left-aligned —
they touch the section's left content edge while the heading text
above starts further in.

Capped each card at 260 px (`minmax(220px, 260px)`) and added
`justify-content: center` so the row of cards centers itself
within the grid. Mobile is unchanged: only one card fits per row,
auto-fit collapses the unused tracks, the single column sits
centered automatically.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Marcel Dütscher

site/styles.css

@@ -589,9 +589,13 @@ pre code { background: none; padding: 0; color: inherit; }
 
 .difficulty-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  /* Cap each card at 260 px instead of stretching to 1fr — otherwise on
+     wide viewports the four cards sprawl across the full section and read
+     as "left-aligned" against the narrower h2/section-lead above. */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
   gap: 14px;
   margin: 20px 0 32px;
+  justify-content: center;
 }
 .difficulty-card {
   background: var(--surface);