/* Option 15 · Ribbon Grid — Ribbon's pair (a rounded photograph, the canvas
   free on the wall, the ten-hue rule beneath) at Split's three-up density,
   with Split's labels above. */
.mx-grid{ display:grid; gap:clamp(22px,3vw,40px) clamp(18px,2.4vw,32px); grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) }
.mx-heads{ display:grid; grid-template-columns:1fr 1fr; padding:0 2px 8px }
.mx-heads .bq-cap__kicker{ color:var(--ink-soft) } .mx-heads .bq-cap__kicker:last-child{ text-align:right }
.mx1-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,18px); align-items:end }
.mx1-pair > figure{ margin:0 }
.mx1 .is-photo .bq-shot{ aspect-ratio:1/1; border-radius:14px 14px 14px 4px; overflow:hidden; box-shadow:0 10px 18px -10px rgba(51,43,66,.4) }
.mx1 .is-art .bq-shot{ aspect-ratio:1/1; display:grid; place-items:end center; padding:0 3% 4% }
.mx1 .is-art .bq-shot img{ object-fit:contain; filter:drop-shadow(0 10px 12px rgba(51,43,66,.2)) }
.mx-rule{ height:5px; margin:12px 0 0; border:0; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--ink) }
.mx-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 2px 0 }

/* the whole section sits in a white box, the way the carousel band does */
.bq{ padding:clamp(14px,2vw,26px) clamp(12px,2.4vw,32px) clamp(48px,6vw,90px) }
.bq > .wrap{
  background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:var(--sh-sticker);
  padding:clamp(20px,2.6vw,36px) clamp(18px,2.6vw,40px) clamp(26px,3vw,44px);
}
.bq-head{ padding-bottom:14px; border-bottom:1.5px dashed var(--hairline) }

/* the ribbon is the canvas's own strongest colours, not the site rainbow */
.mx-rule--own{ background:var(--ribbon) }