/* overviews: styles for ext/overviews.js, the /v2 section overviews. Use the site's --b- tokens only.
   The page reads as a landing page, not a results page: an introduction with room for a picture, the kinds of output as
   shelves of covers, and the search last, in a quieter panel of its own. */

/* ---------------------------------------------------------------- head */
.ov-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
@media (min-width: 1001px) { .ov-head-grid { grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 430px); gap: var(--sp-7); } }
.ov-head h1 { max-width: 15em; }
.ov-h-sub { display: block; margin-top: .14em; font-size: .62em; line-height: 1.08; letter-spacing: -0.03em; }
.ov-head .lede { margin-bottom: 0; }
.ov-head .lh-intro { max-width: 42em; }
.ov-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0 0; padding: 0; }
.ov-jump a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-2) 0 var(--sp-1-5); border-radius: 999px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .1); color: var(--b-ink); font: 500 14.5px/1 var(--font-text); text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.ov-jump a .ico { width: 16px; height: 16px; color: var(--b-primary); }
.ov-jump a:hover { background: var(--b-surface); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .2); }

/* The illustration slot: plainly a placeholder, with what is to go in it */
.ov-ill { position: relative; display: grid; place-items: center; align-content: center; gap: var(--sp-2); min-height: clamp(240px, 24vw, 330px); margin: 0; padding: var(--sp-4); border-radius: 22px; background: repeating-linear-gradient(135deg, rgba(var(--b-shadow), .035) 0 10px, transparent 10px 20px), rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1.5px rgba(var(--b-shadow), .16); text-align: center; }
.ov-ill::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(var(--b-shadow), .22); border-radius: 14px; pointer-events: none; }
.ov-ill-k { position: absolute; top: 20px; left: 20px; padding: var(--sp-1) var(--sp-1); border-radius: 999px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ov-ill-mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: var(--b-surface); color: var(--b-primary); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08); }
.ov-ill-mark .ico { width: 34px; height: 34px; }
.ov-ill figcaption { max-width: 24em; color: var(--b-ink-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1000px) { .ov-ill { min-height: 180px; padding-top: var(--sp-7); } }
.ov-stats { margin-top: clamp(var(--sp-4), 3.4vw, var(--sp-6)); }

/* ---------------------------------------------------------------- featured: shared parts */
.ov-feat { padding: var(--sp-section) 0 0; }
.ov-top { display: grid; gap: var(--sp-head-desc); margin-bottom: var(--sp-head); }
.ov-top .sec-lede { margin: 0; }
.ov-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--b-ink-surface); color: var(--b-accent-on-dark); flex: none; }
.ov-ic .ico { width: 21px; height: 21px; }
.ov-say { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-head-desc); }
.ov-say .ov-ic { margin-bottom: var(--sp-1); }
.ov-cat-h { margin: 0; font: 500 var(--h-section)/1.08 var(--font-display); letter-spacing: -0.03em; }
.ov-cat-h a { color: var(--b-ink); text-decoration: none; }
.ov-cat-h a:hover { color: var(--b-primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.ov-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-0-5) var(--sp-1); margin: 0; color: var(--b-ink); font-size: 15px; line-height: 1.4; }
.ov-best b { flex-basis: 100%; font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-primary); }
.ov-blurb { margin: 0; max-width: 30em; color: var(--b-ink-2); font-size: 15.5px; line-height: 1.55; }
.ov-all { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 42px; margin-top: var(--sp-1); padding: 0 var(--sp-1) 0 var(--sp-2); border-radius: 999px; background: var(--b-solid); color: var(--b-solid-ink); font: 500 14.5px/1 var(--font-text); text-decoration: none; transition: background-color .15s; }
.ov-all:hover { background: var(--b-solid-2); color: var(--b-solid-ink); }
.ov-all .ov-n { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--sp-1); border-radius: 999px; background: rgba(255, 255, 255, .14); font: 500 12.5px/1 var(--font-mono); }
.ov-all .ico { width: 17px; height: 17px; margin-right: var(--sp-1); transition: transform .2s; }
.ov-all:hover .ico { transform: translateX(3px); }

/* The covers: the category pages' featured cards, sized for a shelf */
.ov-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-grid); margin: 0; padding: 0; align-items: stretch; }
.ov-card .nw-art { height: clamp(100px, 7.6vw, 120px); }
.ov-card .nw-body { gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2-5); }
.ov-card .nw-meta { font-size: 11px; }
.ov-ct { margin: 0; font: 500 clamp(1.08rem, 1.2vw, 1.22rem)/1.18 var(--font-display); letter-spacing: -0.02em; color: var(--b-ink); text-wrap: balance; }
.ov-ct a { color: inherit; text-decoration: none; }
.ov-ct a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.ov-ct a:focus-visible { outline: none; }
.ov-ct a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.ov-card .nw-sum { font-size: 14.5px; -webkit-line-clamp: 2; max-height: calc(2 * 1.5em); }
.ov-card .nw-more { margin-top: auto; padding-top: var(--sp-1); font-size: 12.5px; }
/* Plates for things without a cover of their own: an organisation's initials, a country's flag */
.ov-plate { position: relative; display: grid; place-items: center; overflow: hidden; }
.ov-plate.a-dark { background: var(--b-ink-surface); }
.ov-plate.a-paper { background: var(--b-tint-100); }
.ov-plate.a-sage { background: var(--b-surface-2); }
.ov-mono { font: 500 clamp(2.6rem, 4vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--b-primary); }
.ov-plate.a-dark .ov-mono { color: var(--b-accent-on-dark); }
.ov-flag .tflag { width: 64px; height: 64px; box-shadow: 0 0 0 4px var(--b-surface), 0 12px 24px -12px rgba(var(--b-shadow), .5); }
/* Nothing published yet */
.ov-soon { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); min-height: 140px; padding: var(--sp-3) var(--sp-3); border-radius: 24px; background: repeating-linear-gradient(135deg, rgba(var(--b-shadow), .03) 0 10px, transparent 10px 20px); box-shadow: inset 0 0 0 1.5px rgba(var(--b-shadow), .14); }
.ov-soon p { margin: 0; max-width: 40em; color: var(--b-ink-2); line-height: 1.55; }
.ov-soon b { color: var(--b-ink); font-weight: 500; }
.ov-soon-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--b-surface); color: var(--b-primary); }
/* The map shelf shows the map itself */
.ov-mapcard { grid-column: 1 / -1; padding: var(--sp-1); border-radius: 24px; background: var(--b-surface); }
.ov-mapbox { display: grid; justify-items: center; padding: var(--sp-3) var(--sp-2) var(--sp-2); border-radius: 16px; background: var(--b-panel); overflow-x: auto; }

/* ---------------------------------------------------------------- A: shelves */
.ov-shelf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: clamp(var(--sp-3), 3vw, var(--sp-5)) 0; border-top: 1px solid var(--b-rule); scroll-margin-top: calc(var(--nav-h, 72px) + 24px); }
@media (min-width: 1001px) { .ov-shelf { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr); gap: clamp(var(--sp-4), 4vw, var(--sp-8)); align-items: start; } .ov-shelf .ov-say { position: sticky; top: calc(var(--nav-h, 72px) + 24px); } }

/* ---------------------------------------------------------------- B: tabs */
/* The switch's look is shared, in styles.css ("The switch"); this keeps the layout, scrolling and counts */
.ov-tabs { display: flex; margin: 0 0 var(--sp-controls); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ov-tabs::-webkit-scrollbar { display: none; }
.ov-tabs [role="tab"] { flex: none; gap: var(--sp-1); padding: 0 var(--sp-1-5) 0 var(--sp-2); }
.ov-tabs [role="tab"][aria-selected="true"] .ico { color: var(--b-primary); }
.ov-tabs .ov-n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--sp-1); border-radius: 999px; background: rgba(var(--b-shadow), .07); font: 500 11.5px/1 var(--font-mono); }
.ov-tabs [aria-selected="true"] .ov-n { background: var(--b-neutral-2); }
.ov-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: clamp(var(--sp-2), 2.4vw, var(--sp-4)); border-radius: 30px; background: var(--b-panel); }
.ov-panel[hidden] { display: none; }
.ov-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 1001px) { .ov-panel { grid-template-columns: minmax(230px, 1fr) minmax(0, 2.7fr); gap: clamp(var(--sp-4), 3.4vw, var(--sp-6)); align-items: center; padding-left: clamp(var(--sp-3), 3vw, var(--sp-6)); } }

/* ---------------------------------------------------------------- C: lead, digest, index */
.ov-lead-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-grid); }
@media (min-width: 1001px) { .ov-lead-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-2-5); } }
.ov-lead { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; }
.ov-lead .nw-art { height: clamp(200px, 20vw, 290px); }
.ov-lead .nw-body { gap: var(--sp-1-5); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.ov-lead-h { margin: 0; max-width: 20em; font: 500 clamp(1.6rem, 2.4vw, 2.2rem)/1.06 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.ov-lead-h a { color: var(--b-ink); text-decoration: none; }
.ov-lead-h a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.ov-lead-h a:focus-visible { outline: none; }
.ov-lead-h a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.ov-lead-s { margin: 0; max-width: 38em; color: var(--b-ink-2); font-size: 16px; line-height: 1.55; }
.ov-lead .nw-more { margin-top: var(--sp-0-5); }
.ov-digest { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-radius: 28px; background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.ov-dg-h { margin: 0 0 var(--sp-1-5); font: 500 1.35rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--b-ink-surface-ink); }
.ov-digest ul { list-style: none; margin: 0; padding: 0; }
.ov-digest li { display: grid; gap: var(--sp-1); padding: var(--sp-2) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.ov-dg-k { display: inline-flex; align-items: center; gap: var(--sp-1); font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.ov-dg-k .ico { width: 15px; height: 15px; color: var(--b-accent-on-dark); }
.ov-dg-k a { color: var(--b-accent-on-dark); text-decoration: none; }
.ov-dg-k a:hover { text-decoration: underline; }
.ov-dg-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-0-5) var(--sp-2); }
.ov-dg-t a { color: var(--b-ink-surface-ink); font: 500 17px/1.3 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.ov-dg-t a:hover { text-decoration: underline; text-underline-offset: .16em; }
.ov-dg-when, .ov-dg-none { color: rgba(255, 255, 255, .66); font-size: 13px; white-space: nowrap; }
.ov-digest :focus-visible { outline: 2px solid var(--b-accent-on-dark); outline-offset: 2px; }
.ov-index { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-1-5); margin: var(--sp-2-5) 0 0; padding: 0; }
.ov-ix { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-1); height: 100%; padding: var(--sp-2) var(--sp-2) var(--sp-2); border-radius: 20px; background: var(--b-surface); color: var(--b-ink); text-decoration: none; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .06); transition: transform .2s, box-shadow .2s; }
.ov-ix:hover { color: var(--b-ink); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), var(--shadow-lift); }
.ov-ix .ov-ic { margin-bottom: var(--sp-1); }
.ov-ix-t { font: 500 20px/1.15 var(--font-display); letter-spacing: -0.015em; }
.ov-ix-b { color: var(--b-ink-2); font-size: 14.5px; line-height: 1.45; }
.ov-ix-n { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-1-5); border-top: 1px solid var(--b-rule); color: var(--b-ink-3); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ov-ix-n b { margin-right: var(--sp-0-5); color: var(--b-ink); font: 400 22px/1 var(--font-display); letter-spacing: -0.03em; }
.ov-ix-n .ico { width: 18px; height: 18px; color: var(--b-ink); transition: transform .2s; }
.ov-ix:hover .ov-ix-n .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------- search within the section: secondary */
.ov-find { padding: var(--sp-section) 0 0; }
.ov-find-box { padding: clamp(var(--sp-3), 3vw, var(--sp-5)); border-radius: 30px; background: var(--b-ground-card); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .07); }
.ov-find-h { margin: 0; font: 500 var(--h-section)/1.1 var(--font-display); letter-spacing: -0.025em; }
.ov-find-l { margin: var(--sp-head-desc) 0 0; max-width: 46em; color: var(--b-ink-2); font-size: 15.5px; line-height: 1.55; }
.ov-find-l a { color: var(--b-primary); }
.ov-q { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-0-5) var(--sp-1) var(--sp-0-5) var(--sp-2); border-radius: 999px; background: var(--b-surface); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .16); }
.ov-q:focus-within { box-shadow: inset 0 0 0 2px var(--b-primary); }
.ov-q > .ico { width: 19px; height: 19px; color: var(--b-ink-3); flex: none; }
.ov-q input { flex: 1; min-width: 0; border: 0; background: transparent; padding: var(--sp-1-5) var(--sp-0-5); font: 400 16.5px/1.3 var(--font-text); color: var(--b-ink); }
.ov-q input:focus { outline: none; }
.ov-q input::placeholder { color: var(--b-ink-3); opacity: 1; }
.ov-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.ov-q-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--b-ink-2); cursor: pointer; }
.ov-q-x:hover { background: var(--b-panel); color: var(--b-ink); }
.ov-q-x .ico { width: 16px; height: 16px; }
.ov-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); }
.ov-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-right: auto; }
.ov-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-1) 0 var(--sp-2); border: 0; border-radius: 999px; background: var(--b-panel); color: var(--b-ink-2); font: 500 14px/1 var(--font-text); cursor: pointer; transition: background-color .15s, color .15s; }
.ov-chip:hover { background: var(--b-surface-2); color: var(--b-ink); }
.ov-chip[aria-pressed="true"] { background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.ov-chip-n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--sp-1); border-radius: 999px; background: var(--b-surface); color: var(--b-ink-2); font: 500 11px/1 var(--font-mono); }
.ov-chip[aria-pressed="true"] .ov-chip-n { background: rgba(255, 255, 255, .14); color: var(--b-ink-surface-ink); }
.ov-chip:focus-visible, .ov-sel select:focus-visible, .ov-q-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ov-sel { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--b-ink-3); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ov-sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: calc(var(--sp-0-5) * -1); border: solid var(--b-control); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.ov-sel select { min-height: 36px; padding: 0 var(--sp-4) 0 var(--sp-1-5); border: 0; border-radius: 999px; background: var(--b-surface); box-shadow: inset 0 0 0 1px rgba(var(--b-shadow), .16); color: var(--b-ink); font: 500 14px/1 var(--font-text); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ov-res-bar { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-1-5); padding-top: var(--sp-2); border-top: 1px solid var(--b-rule); }
.ov-count { margin: 0; color: var(--b-ink-2); font-size: 15px; }
.ov-count b { color: var(--b-ink); font-weight: 500; }
.ov-count:focus { outline: none; }
.ov-cty { display: flex; align-items: flex-start; gap: var(--sp-1); margin: 0 0 var(--sp-1-5); padding: var(--sp-1-5) var(--sp-2); border-radius: 16px; background: var(--b-tint-50); color: var(--b-ink-2); font-size: 15px; line-height: 1.5; }
.ov-cty[hidden] { display: none; }
.ov-cty .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--b-primary); flex: none; }
.ov-cty a { color: var(--b-primary); font-weight: 500; }
.ov-results .card { background: var(--b-surface); border-radius: 20px; }
.ov-results.rel-grid { grid-auto-rows: auto; }
.ov-none { grid-column: 1 / -1; padding: var(--sp-3); border-radius: 20px; background: var(--b-surface); color: var(--b-ink-2); line-height: 1.55; }
.ov-none b { color: var(--b-ink); font-weight: 500; }
.ov-none a { color: var(--b-primary); }
.ov-res-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1-5) var(--sp-2-5); margin-top: var(--sp-2); }
.ov-res-foot .btn[hidden] { display: none; }
.ov-full { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: auto; color: var(--b-primary); font-weight: 500; text-decoration: none; }
.ov-full .ico { width: 17px; height: 17px; transition: transform .2s; }
.ov-full:hover { text-decoration: underline; text-underline-offset: .2em; }
.ov-full:hover .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------- the other overviews */
.ov-others { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding-block: clamp(var(--sp-5), 5vw, var(--sp-8)) clamp(var(--sp-8), 8vw, var(--sp-13)); color: var(--b-ink-3); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ov-others ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; }
.ov-others .tagbtn { min-height: 36px; padding: 0 var(--sp-2); background: var(--b-surface); color: var(--b-ink); font-size: 14px; letter-spacing: 0; text-transform: none; }
.ov-others .tagbtn:hover { background: var(--b-surface-2); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1000px) {
  /* The covers become a row that scrolls in its own box, so a shelf stays one shelf tall */
  .ov-cards { display: flex; gap: var(--sp-1-5); margin-inline: calc(-1 * var(--page-pad)); padding: 2px var(--page-pad) var(--sp-1); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-pad); scrollbar-width: none; }
  .ov-cards::-webkit-scrollbar { display: none; }
  .ov-cards > .ov-card { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
  .ov-cards > .ov-soon, .ov-cards > .ov-mapcard { flex: 1 1 100%; }
  .ov-panel .ov-cards { margin-inline: calc(-1 * clamp(var(--sp-2), 2.4vw, var(--sp-4))); padding-inline: clamp(var(--sp-2), 2.4vw, var(--sp-4)); scroll-padding-inline: clamp(18px, 2.4vw, 32px); }
}
@media (max-width: 640px) {
  .ov-jump ul { gap: var(--sp-1); }
  .ov-jump a { min-height: 36px; font-size: 13.5px; }
  .ov-filters { align-items: stretch; }
  .ov-chips { margin-right: 0; }
  .ov-sel { flex: 1 1 140px; }
  .ov-sel select { flex: 1; min-width: 0; }
  .ov-results.rel-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-full { margin-left: 0; }
  .ov-digest, .ov-lead .nw-body { padding-inline: var(--sp-2-5); }
  .ov-mapbox .tilemap.sm { --tile: 34px; --gap: 4px; }
}

/* Each category / tool as the site's tile card (.mcard), four across */
.mcards.ov-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* five tiles: three then two; three tiles: one row */
.mcards.ov-tiles:has(> li:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mcards.ov-tiles:has(> li:nth-child(5)) > li { grid-column: span 2; }
.mcards.ov-tiles:has(> li:nth-child(5)) > li:nth-child(n+4) { grid-column: span 3; }
.mcards.ov-tiles.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mcards.ov-tiles, .mcards.ov-tiles.is-3, .mcards.ov-tiles:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mcards.ov-tiles > li { grid-column: auto !important; } }
@media (max-width: 560px) { .mcards.ov-tiles, .mcards.ov-tiles.is-3, .mcards.ov-tiles:has(> li:nth-child(5)) { grid-template-columns: 1fr; } }