/* sw12-desktop-only: these page rules were designed at 1440; below 1101px the earlier responsive layout applies */
@media (min-width:1101px){
/* sw11 round, group b. Scoped to body.xb-pf (portfolio), body.xb-ov (overstek case), body.xb-mk (merkidentiteit). */

/* ---------- shared for my pages: section headings are fully written once they are on screen ---------- */
@supports (animation-timeline:view()){
  html.b2-on.b9-sub body:is(.xb-pf,.xb-ov,.xb-mk) main h2.b2-lt:not(#x){animation:lv-sweep linear both!important;animation-timeline:view()!important;animation-range:entry 0% entry 100%!important;clip-path:none!important}
}

/* ================= PORTFOLIO ================= */
html:root body.xb-pf .g37-vh:not(#x){padding-top:0!important;padding-bottom:0!important}
html:root body.xb-pf .g37-vh-t:not(#x){align-items:end;margin-bottom:0!important}
html:root body.xb-pf .g37-vh-t .lead:not(#x){padding-bottom:12px}

/* the honest label above the work */
.xb-pf .xb-note{display:flex;justify-content:space-between;gap:24px;margin:30px 0 24px;padding-top:14px;border-top:1px solid rgba(243,238,228,.16);font-size:14px;letter-spacing:.02em;color:rgba(243,238,228,.62)}
.xb-pf .xb-note span:first-child{color:#e3c564}

/* composed list: one lead project, then pairs that alternate wide and narrow */
.xb-pf .xb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:0}
.xb-pf .xb-it{margin:0;padding:0;min-width:0}
/* each pair shares two rows (picture, caption) so the pictures meet one bottom line and the captions one top line */
.xb-pf :is(.xb-w,.xb-n){grid-row:span 2;display:grid;grid-template-rows:subgrid}
.xb-pf .xb-w{grid-column:span 7}
.xb-pf .xb-n{grid-column:span 5}
.xb-pf .xb-a{display:block;color:inherit;text-decoration:none}
.xb-pf :is(.xb-w,.xb-n) .xb-a{grid-row:1/3;display:grid;grid-template-rows:subgrid}
.xb-pf :is(.xb-w,.xb-n) .xb-shot{align-self:end}
.xb-pf :is(.xb-w,.xb-n) .xb-cap{align-self:start;margin-bottom:104px}
.xb-pf .xb-list>li:nth-last-child(-n+2) .xb-cap{margin-bottom:0}
.xb-pf .xb-shot{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden}
.xb-pf .xb-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 34px 60px -34px rgba(0,0,0,.85);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.xb-pf .xb-a:hover .xb-shot img{transform:scale(1.018)}

.xb-pf .xb-cap{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:24px;row-gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(243,238,228,.14)}
.xb-pf .xb-tr{font-size:30px;line-height:1.1;letter-spacing:-.01em;color:#f3eee4}
.xb-pf .xb-pp{font-size:15px;color:#e3c564;white-space:nowrap;text-align:right}
.xb-pf .xb-nm{grid-column:1/-1;font-size:16px;line-height:1.5;color:rgba(243,238,228,.7)}
.xb-pf .xb-nm b{font-weight:600;color:#f3eee4;margin-right:4px}
.xb-pf .xb-a:hover .xb-tr{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(227,197,100,.7)}

/* the lead project: large picture, its story beside it */
.xb-pf .xb-lead{grid-column:1/-1;margin-bottom:120px}
.xb-pf .xb-lead .xb-a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:end}
.xb-pf .xb-lead .xb-shot{grid-column:1/9;aspect-ratio:16/9.6}
.xb-pf .xb-lead .xb-shot img{object-position:50% 10%}
.xb-pf .xb-lead .xb-cap{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:0;border:0}
.xb-pf .xb-lead .xb-tr{font-size:52px;line-height:1;letter-spacing:-.02em;order:1}
.xb-pf .xb-lead .xb-nm{order:2;margin-top:18px;font-size:18px;line-height:1.55;max-width:20em}
.xb-pf .xb-lead .xb-nm b{display:block;margin:0 0 4px}
.xb-pf .xb-lead .xb-pp{order:3;margin-top:26px;padding-top:14px;border-top:1px solid rgba(243,238,228,.16);width:100%;text-align:left;font-size:16px}

/* demos: the explanation stays beside the long demo while reading */
html:root body.xb-pf .g38-demo-t:not(#x){position:sticky;top:120px;align-self:start}

html:root body.xb-pf .g38-demos:not(#x){padding-top:120px!important}

/* ================= OVERSTEK CASE ================= */
html:root body.xb-ov .g37-ch-t:not(#x){align-items:flex-end;justify-content:space-between;gap:48px}
html:root body.xb-ov .g37-ch h1:not(#x){max-width:9.2em;text-wrap:balance}
.xb-ov .xb-ov-in{flex:0 1 420px;padding-bottom:10px}
.xb-ov .xb-ov-lead{margin:0 0 18px;font-size:18px;line-height:1.6;color:rgba(243,238,228,.78)}
html:root body.xb-ov .xb-ov-in .g37-ch-l:not(#x){padding:0;text-align:left}

/* the try-it section: a wider story column, the heading in three lines, its label level with the demo */
html:root body.xb-ov .cw:not(#x){grid-template-columns:460px minmax(0,1fr)!important;column-gap:56px!important;padding-top:120px!important}
html:root body.xb-ov .cw .g37-feat:not(#x){font-size:46px!important;line-height:1.06!important;letter-spacing:-.015em!important;margin:14px 0 22px!important;text-wrap:balance}
html:root body.xb-ov .cw-who:not(#x){max-width:26em}

/* calmer rhythm between the sections below */
html:root body.xb-ov .cw-own:not(#x){padding-top:128px!important}
html:root body.xb-ov .d22:not(#x){padding-bottom:0!important}
html:root body.xb-ov .g30-show:not(#x){padding-top:88px!important}
html:root body.xb-ov .cw-scope:not(#x),html:root body.xb-ov .cw-ask:not(#x){padding-top:128px!important}

/* next example: label above, name below, one clean line */
html:root body.xb-ov .next:not(#x){padding-top:112px!important;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
html:root body.xb-ov .next .lab:not(#x){display:block}
html:root body.xb-ov .next .nextlink:not(#x){margin:0!important}
html:root body.xb-ov .g30-sol:not(#x){grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;align-items:center}
html:root body.xb-ov .g30-sol figcaption:not(#x){align-self:center!important;margin:0!important;max-width:24em}

/* ================= MERKIDENTITEIT ================= */
/* first screen: content starts sooner under the navigation */
html:root body.xb-mk .g-roomo:not(#x){min-height:0!important;padding:0!important;margin-top:0!important}
html:root body.xb-mk .g-roomo-in:not(#x){padding-top:8px!important;padding-bottom:0!important;align-items:center}
html:root body.xb-mk section.mk:not(#x){padding-top:128px!important}
html:root body.xb-mk section.mk>.wrap>.lead:not(#x){margin-bottom:56px}
html:root body.xb-mk #mk-logo .mk-t:not(#x){position:sticky;top:120px;align-self:start}

/* logo tier: Overstek leads large with its dark and icon versions, the other three follow smaller */
html:root body.xb-mk .xb-lgs:not(#x){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 16px!important}
html:root body.xb-mk .xb-lgs .xb-lg-big:not(#x){grid-column:1/-1}
html:root body.xb-mk .xb-lgs .xb-lg-big .g45-lg-f:not(#x){aspect-ratio:21/8!important;padding:40px 16%!important}
html:root body.xb-mk .xb-lgs .xb-lg-big .g45-lg-f img:not(#x){width:100%!important;max-width:520px!important;height:auto!important}
html:root body.xb-mk .xb-lgs .g45-lg:not(.xb-lg-big) .g45-lg-f:not(#x){aspect-ratio:4/3!important;padding:28px 30px!important}
html:root body.xb-mk .xb-lg-big figcaption:not(#x){display:grid!important;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
html:root body.xb-mk .xb-lg-big figcaption>b,html:root body.xb-mk .xb-lg-big figcaption>span:not(.xb-lg-v){grid-row:1}
.xb-mk .xb-lg-v{grid-row:1;grid-column:3;display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(243,238,228,.62)}
.xb-mk .xb-lg-v img{width:40px;height:40px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(243,238,228,.18)}
.xb-mk .xb-lg-v span{order:-1;margin-right:6px}

/* complete brand: the overview stays in view beside the long list */
html:root body.xb-mk .g46-mc-top>.g46-mc-ov:not(#x){position:sticky;top:110px;align-self:start}

/* pictures in the complete brand line up with the text column above them */
html:root body.xb-mk :is(.g46-mc-part>.ovs2-f,.g41-world>.g41-big):not(#x):not(#y):not(#z){margin-left:474px!important;width:auto!important;max-width:none!important}
html:root body.xb-mk .g41-world .g41-inc:not(#x):not(#y){margin-left:474px!important}

/* other applications, five pictures in one composed block (three, then two wider) */
html:root body.xb-mk .g41-grid:not(#x){grid-template-columns:repeat(6,minmax(0,1fr))!important}
html:root body.xb-mk .g41-grid>figure:not(#x){grid-column:span 2}
html:root body.xb-mk .g41-grid>figure:nth-child(n+4):not(#x){grid-column:span 3}
html:root body.xb-mk .g41-grid>figure:nth-child(n+4) .mw-f:not(#x):not(#y){aspect-ratio:16/9!important}
html:root body.xb-mk .g41-grid>figure:nth-child(n+4) .mw-f img:not(#x):not(#y){width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover}

/* loose items and process: headings that fit, prices on the right, calmer gaps */
html:root body.xb-mk section.g31-pair:not(#x){padding-top:128px!important;column-gap:88px}
html:root body.xb-mk .g31-pair h2:not(#x):not(#y){font-size:52px!important;line-height:1.04!important;margin-bottom:20px!important}
html:root body.xb-mk .g31-pair .rows>div:not(#x):not(#y){display:flex!important;justify-content:space-between;align-items:baseline;gap:24px}
html:root body.xb-mk .g31-pair dd:not(#x):not(#y){grid-column:auto!important;margin:0!important;text-align:right;white-space:nowrap}
html:root body.xb-mk :is(section.g47-cmp,section.g45-mko-s):not(#x){padding-top:128px!important}
html:root body.xb-mk section.close:not(#x){margin-top:96px!important}

/* overstek: closing question upright like every other heading, next example name a step larger */
html:root body.xb-ov .cw-ask h2 em:not(#x),html:root body.xb-mk section.close h2 em:not(#x){font-style:normal}
html:root body.xb-ov .next .nextlink:not(#x):not(#y){font-size:72px!important;line-height:1!important}

/* ================= sw11-fable round ================= */
/* ---------- portfolio: the lead project gets a second, working screen above its story ---------- */
.xb-pf .xb-lead .xb-a{grid-template-rows:auto 1fr;align-items:stretch}
.xb-pf .xb-lead .xb-shot{grid-row:1/3}
.xb-pf .xb-lead .xb-shot2{grid-column:9/13;grid-row:1;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 34px 60px -34px rgba(0,0,0,.85)}
.xb-pf .xb-lead .xb-shot2 img{display:block;width:150%;max-width:none;height:auto}
.xb-pf .xb-lead .xb-cap{grid-row:2;align-self:end}
.xb-pf .xb-lead .xb-tr{font-size:48px}
/* a working screen instead of a homepage keeps its own proportions */
.xb-pf .xb-fn .xb-shot img{object-position:0 0}
.xb-pf :is(.xb-w,.xb-n) .xb-cap{margin-bottom:96px}

/* ---------- overstek ---------- */
/* first screen: the outline button with package and price beside it */
.xb-ov .xb-ov-act{display:flex;align-items:center;gap:22px;margin:0}
.xb-ov .xb-ov-pp{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.35;color:#e3c564;white-space:nowrap}
.xb-ov .xb-ov-pp b{font-weight:600;color:#f3eee4}
/* try-it: a lower project picture so the project list is in view at once */
html:root body.xb-ov .fd-stage img:not(#x):not(#y){aspect-ratio:16/5.2!important;width:100%!important;height:auto!important;object-fit:cover!important;object-position:50% 58%!important}
/* the step note reads as a margin note, not a second headline */
html:root body.xb-ov .cw-note h2:not(#x):not(#y){font-size:32px!important;line-height:1.12!important;letter-spacing:-.01em!important;margin:0 0 10px!important}
html:root body.xb-ov .cw-note p:not(#x){font-size:16px;line-height:1.55;color:rgba(243,238,228,.72);max-width:24em}
/* next example keeps clear of the footer line */
html:root body.xb-ov .next:not(#x){padding-bottom:104px!important}

/* ---------- merkidentiteit ---------- */
/* first screen: the photo starts level with the heading and stands taller */
html:root body.xb-mk .g-roomo-in:not(#x){align-items:start!important}
html:root body.xb-mk .g-roomo-x:not(#x){padding-top:46px}
html:root body.xb-mk .wp-hf .wp-f:not(#x):not(#y){aspect-ratio:6/5!important}
html:root body.xb-mk .wp-hf .wp-f img:not(#x):not(#y){width:100%!important;height:100%!important;object-fit:cover!important;object-position:42% 50%}
html:root body.xb-mk .wp-hf figcaption:not(#x){padding-top:14px}
/* logo tier: four marks in one composed block, each large enough to judge */
html:root body.xb-mk .xb-lgs:not(#x):not(#y){grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:26px 16px!important}
html:root body.xb-mk .xb-lgs .xb-lg-big:not(#x):not(#y){grid-column:span 4}
html:root body.xb-mk .xb-lgs .g45-lg:nth-child(2):not(#x){grid-column:span 2}
html:root body.xb-mk .xb-lgs .g45-lg:nth-child(n+3):not(#x){grid-column:span 3}
html:root body.xb-mk .xb-lgs .g45-lg .g45-lg-f:not(#x):not(#y){aspect-ratio:auto!important;height:300px!important;box-sizing:border-box}
html:root body.xb-mk .xb-lgs .xb-lg-big .g45-lg-f:not(#x):not(#y){padding:40px 64px!important}
html:root body.xb-mk .xb-lgs .g45-lg:nth-child(2) .g45-lg-f:not(#x):not(#y){padding:40px 30px!important}
html:root body.xb-mk .xb-lgs .g45-lg:nth-child(n+3) .g45-lg-f:not(#x):not(#y){height:250px!important;padding:40px 64px!important}

/* --- round two --- */
/* portfolio: pairs start on one top line; the narrow one carries a fuller caption */
.xb-pf :is(.xb-w,.xb-n):not(#x){grid-row:auto;display:block}
.xb-pf :is(.xb-w,.xb-n) .xb-a:not(#x){display:block}
.xb-pf .xb-list{row-gap:112px}
.xb-pf :is(.xb-w,.xb-n) .xb-cap:not(#x){margin-bottom:0}
.xb-pf .xb-n .xb-cap{grid-template-columns:1fr;row-gap:8px}
.xb-pf .xb-n .xb-nm b{display:block;margin:0 0 2px}
.xb-pf .xb-n .xb-pp{order:3;text-align:left;margin-top:8px}
.xb-pf .xb-lead:not(#x){margin-bottom:8px}
.xb-pf .xb-lead .xb-shot2 img{width:156%}

/* overstek: the next example is its own band, with its first screen beside the name */
html:root body.xb-ov .xb-nx:not(#x):not(#y){margin-top:128px!important;padding-top:56px!important;padding-bottom:120px!important;border-top:1px solid rgba(243,238,228,.16);display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:0 32px}
.xb-ov .xb-nx-t{grid-column:1/7;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.xb-ov .xb-nx-d{margin:14px 0 0;font-size:18px;color:rgba(243,238,228,.72)}
.xb-ov .xb-nx-f{grid-column:8/13;display:block;aspect-ratio:16/8;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 34px 60px -34px rgba(0,0,0,.85)}
.xb-ov .xb-nx-f img{display:block;width:100%;height:auto}

/* merkidentiteit: two marks on their own brand ground */
html:root body.xb-mk .xb-lgs .xb-lg-d .g45-lg-f:not(#x):not(#y):not(#z){padding:0!important}
html:root body.xb-mk .xb-lgs .xb-lg-d .g45-lg-f img:not(#x):not(#y){width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important}

/* --- round three --- */
/* overstek: the step note travels with the demo, so the left column never runs dry */
html:root body.xb-ov .cw-side:not(#x):not(#y){align-self:stretch!important;display:flex!important;flex-direction:column;align-items:stretch}
html:root body.xb-ov .cw-side>*{flex:none}
html:root body.xb-ov .cw-open:not(#x){order:1;margin-top:18px!important}
html:root body.xb-ov .cw-notes:not(#x):not(#y){order:2;position:sticky!important;top:120px;margin-top:28px}
html:root body.xb-ov .g-bb-more:not(#x):not(#y):not(#z):not(#w){display:inline-block!important;margin-top:20px!important}
.xb-ov .xb-nx-t{align-self:center}
/* merkidentiteit: the guide link clear of the button above it */
html:root body.xb-mk #mk-merk .g33-mkr+p:not(#x),html:root body.xb-mk #mk-merk a.g-tl:not(.g46-na):not(#x):not(#y):not(#z):not(#w){margin-top:16px!important;display:inline-block!important}

/* ================= sw12 round ================= */
/* merkidentiteit hero: show the whole pick-up (3:2 source), not a tight crop */
html body main .g-roomo-x .wp-hf .wp-f:has(img[src*="ovs3-pickup"]):not(#x):not(#y):not(#z):not(#w){aspect-ratio:3/2!important;height:auto!important;min-height:0!important;max-height:none!important}
html body main .g-roomo-x .wp-hf img[src*="ovs3-pickup"]:not(#x):not(#y){width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;transform:none}
/* merkidentiteit hero (sw12, owner 12 Nov "groter"): the photo runs to the right edge of the screen, whole pick-up at 3:2 */
html body.xb-mk .g-roomo .g-roomo-in:not(#a):not(#b):not(#c){grid-template-columns:689px minmax(0,1fr)!important;column-gap:48px!important}
html body.xb-mk .g-roomo .g-roomo-x:not(#a):not(#b):not(#c){margin-right:calc(-1 * max(0px, (100vw - 1312px) / 2))!important;width:auto!important;max-width:none!important}
html body.xb-mk .g-roomo-x .wp-hf:not(#a):not(#b),html body.xb-mk .g-roomo-x .wp-hf .wp-f:not(#a):not(#b):not(#c):not(#d):not(#e){width:100%!important;max-width:none!important}
html body.xb-mk .g-roomo-x .wp-hf .wp-f:not(#a):not(#b):not(#c):not(#d):not(#e){border-radius:10px 0 0 10px!important}

}
/* sw12 mobile (13 Nov): merkidentiteit below desktop. Tiles side by side in filled two-column grids, fewer repeated
   examples so the page is much shorter, tighter spacing. Desktop is untouched. */
@media (max-width:1100px){
  /* logo tiles: a filled 2 x 2 grid; the dark and icon versions of Overstek become a row of small rounds */
  html:root body.xb-mk .xb-lgs:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important}
  html:root body.xb-mk .xb-lgs>.g45-lg:not(#a):not(#b):not(#c){grid-column:auto!important;grid-row:auto!important;margin:0!important;min-width:0!important}
  html:root body.xb-mk .xb-lgs .g45-lg-f:not(#a):not(#b):not(#c){aspect-ratio:4/3!important;padding:16px 14px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  html:root body.xb-mk .xb-lgs .g45-lg-f img:not(#a):not(#b):not(#c){width:100%!important;max-width:100%!important;height:auto!important;max-height:100%!important;object-fit:contain!important}
  html:root body.xb-mk .xb-lgs figcaption:not(#a):not(#b):not(#c){display:flex!important;flex-direction:column!important;gap:2px!important;margin-top:8px!important}
  html:root body.xb-mk .xb-lg-v:not(#a):not(#b):not(#c){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;margin-top:8px!important}
  html:root body.xb-mk .xb-lg-v img:not(#a):not(#b):not(#c){width:30px!important;height:30px!important;border-radius:50%!important;flex:none!important}
  html:root body.xb-mk .xb-lg-v span:not(#a):not(#b):not(#c){order:9!important;flex-basis:100%!important;font-size:12.5px!important;margin:0!important}
  /* Libi Zorg pieces: the card pair on one row, letter and post side by side */
  html:root body.xb-mk .m23-g:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important}
  html:root body.xb-mk .m23-g>.m23-cards:not(#a):not(#b):not(#c){grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 12px!important}
  html:root body.xb-mk .m23-g>.m23-cards>figcaption:not(#a):not(#b):not(#c){grid-column:1/-1!important}
  html:root body.xb-mk .m23-g>figure:not(#a):not(#b):not(#c){grid-row:auto!important;margin:0!important;min-width:0!important}
  html:root body.xb-mk .m23-g>.m23-letter .g39-art:not(#a):not(#b):not(#c),html:root body.xb-mk .m23-g>.m23-postf .g39-art:not(#a):not(#b):not(#c){aspect-ratio:auto!important}
  /* merkgids: four pages instead of eighteen, two by two */
  html:root body.xb-mk .g46-gr-t:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 12px!important}
  html:root body.xb-mk .g46-gr-t>.g46-gt:nth-child(n+5):not(#a):not(#b):not(#c){display:none!important}
  html:root body.xb-mk .g46-gr-t>.g46-gt:not(#a):not(#b):not(#c){min-width:0!important}
  html:root body.xb-mk .g46-gr-t>.g46-gt img:not(#a):not(#b):not(#c){width:100%!important;height:auto!important}
  /* social pack: profile rounds in one row, two posts, one banner, one page mockup */
  html:root body.xb-mk .g46-pf:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  html:root body.xb-mk .g46-pf>figcaption:not(#a):not(#b):not(#c),html:root body.xb-mk .g46-posts>figcaption:not(#a):not(#b):not(#c){grid-column:1/-1!important}
  html:root body.xb-mk .g46-pf>img:not(#a):not(#b):not(#c){width:100%!important;height:auto!important;grid-column:auto!important;grid-row:auto!important}
  html:root body.xb-mk .g46-posts:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 12px!important}
  html:root body.xb-mk .g46-posts>img:not(#a):not(#b):not(#c){width:100%!important;height:auto!important;grid-column:auto!important;grid-row:auto!important}
  html:root body.xb-mk .g46-posts>img:nth-of-type(3):not(#a):not(#b):not(#c),
  html:root body.xb-mk .g46-soc>.g46-sty:not(#a):not(#b):not(#c),
  html:root body.xb-mk .g46-soc>.g46-ban:not(.g46-ban-w):not(#a):not(#b):not(#c),
  html:root body.xb-mk .ovs2-duo>figure+figure:not(#a):not(#b):not(#c){display:none!important}
  /* other applications: four, two by two */
  html:root body.xb-mk .g41-grid:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 12px!important}
  html:root body.xb-mk .g41-grid>figure:nth-of-type(n+5):not(#a):not(#b):not(#c){display:none!important}
  html:root body.xb-mk .g41-grid>figure:not(#a):not(#b):not(#c){margin:0!important;min-width:0!important;width:auto!important;grid-column:auto!important;grid-row:auto!important}
  html:root body.xb-mk .g41-grid>figure figcaption:not(#a):not(#b):not(#c){font-size:13px!important;line-height:1.4!important}
  /* spacing inside the long Merk compleet block */
  html:root body.xb-mk .mk>.wrap>.mk-tier:not(#a):not(#b):not(#c){padding-top:40px!important;padding-bottom:0!important;row-gap:32px!important}
  html:root body.xb-mk .mk>.wrap>.mk-tier+.mk-tier:not(#a):not(#b):not(#c){margin-top:48px!important}
  html:root body.xb-mk .g46-mc-part:not(#a):not(#b):not(#c){margin-top:56px!important;padding-top:0!important}
  html:root body.xb-mk main>.g31-pair:not(#a):not(#b):not(#c){padding-top:var(--sw-s)!important;margin-top:0!important}
}
@media (max-width:699px){
  /* sw12 mobile: on a phone the Wat u krijgt list reads as one column, two columns wrapped every line */
  html:root body.xb-mk ul.mk-get:not(#a):not(#b):not(#c){display:block!important;columns:auto!important;column-count:1!important;grid-template-columns:none!important}
}
/* sw12 mobile: tablet, part headings and their text stack instead of a squeezed side column */
@media (min-width:700px) and (max-width:1100px){
  html:root body.xb-mk .g46-mc-pt:not(#a):not(#b):not(#c){display:block!important}
  html:root body.xb-mk .g46-mc-pt>p:not(#a):not(#b):not(#c){margin-top:12px!important;max-width:36em!important}
  html:root body.xb-mk .g46-cm:not(#a):not(#b):not(#c){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 24px!important}
  html:root body.xb-mk .g46-cm>.g46-files:not(#a):not(#b):not(#c){grid-column:1/-1!important}
  html:root body.xb-mk .g46-files ul:not(#a):not(#b):not(#c){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
  html:root body.xb-mk .g46-files li:not(#a):not(#b):not(#c){grid-template-columns:90px minmax(0,1fr)!important}
}
@media (max-width:1100px){
  /* sw12 mobile: with one page mockup left, it takes the full width */
  html:root body.xb-mk .ovs2-duo:not(#a):not(#b):not(#c){grid-template-columns:minmax(0,1fr)!important}
}