.b-bresser{scroll-margin-top:96px;--tussen:clamp(2rem,calc(5*var(--vw)),5rem)}
.b-bresser__rooster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
grid-template-areas:"tekst beeld" "samen beeld";grid-template-rows:auto 1fr;column-gap:var(--tussen);align-items:start}
.b-bresser__tekst{grid-area:tekst}
.b-bresser__tekst .b-kopgroep{margin-bottom:.4rem}
.b-bresser__samen{grid-area:samen;position:relative;width:min(100%,27rem);aspect-ratio:338/208;margin-top:clamp(2.4rem,1.8rem + calc(2*var(--vw)),3.8rem)}
.b-bresser__ringen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-bresser__ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4}
.b-bresser__lens{fill:var(--b-signaal)}
.b-bresser__boog{fill:none;stroke:var(--b-signaal);stroke-width:3.4;stroke-linecap:round}
.b-bresser__naam,.b-bresser__jaar{position:absolute;top:50%;margin:0;text-align:center;transform:translate(-50%,-50%)}
.b-bresser__naam{width:36%}
.b-bresser__naam--brocken{left:20.4%}
.b-bresser__naam--bresser{left:79.6%}
.b-bresser__jaar{left:50%}
.b-bresser__naam b{display:block;font:600 clamp(.92rem,.86rem + calc(.3*var(--vw)),1.12rem)/1.2 var(--font-titel);letter-spacing:-.01em;color:#fff}
.b-bresser__naam span{display:block;margin-top:.35rem;font-size:.82rem;line-height:1.35;color:var(--b-op-donker)}
.b-bresser__jaar b{display:block;font:700 clamp(1.2rem,1rem + calc(.7*var(--vw)),1.6rem)/1 var(--font-titel);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--b-inkt)}
.b-bresser__jaar span{display:block;margin-top:.25rem;font:600 .78rem/1 var(--font-kop);color:var(--b-inkt)}
.b-bresser__beeld{grid-area:beeld;position:relative;isolation:isolate;padding-bottom:clamp(8rem,4rem + calc(7*var(--vw)),11rem);
margin-right:calc(-1 * ((calc(100*var(--vw)) - min(calc(100*var(--vw)),var(--maxw,1200px))) / 2 + var(--pad,16px)))}
.b-bresser__woord{position:absolute;z-index:0;left:-6%;top:-.62em;font:700 clamp(5.5rem,2.5rem + calc(8*var(--vw)),10.5rem)/1 var(--font-titel);
letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);transform:rotate(-7deg);
transform-origin:0 100%;white-space:nowrap;pointer-events:none;user-select:none}
.b-bresser__foto{position:relative;z-index:1;margin:0;height:clamp(26rem,15rem + calc(22*var(--vw)),38rem);filter:drop-shadow(-18px 26px 30px rgba(0,0,0,.4))}
.b-bresser__raam{height:100%;overflow:hidden;clip-path:polygon(17% 0,100% 0,100% 100%,0 100%)}
.b-bresser__raam img{width:100%;height:100%;object-fit:cover;object-position:58% 66%;display:block}
.b-bresser__citaat{position:absolute;z-index:2;left:calc(var(--tussen) * -.55);bottom:0;width:min(31rem,calc(100% - 3rem));margin:0;
padding:clamp(1.9rem,1.5rem + calc(1*var(--vw)),2.4rem) clamp(1.4rem,1.1rem + calc(1*var(--vw)),2rem) 1.2rem;border-radius:var(--b-r-kaart);background:#fff;
color:var(--b-inkt);box-shadow:0 34px 54px -26px rgba(0,0,0,.6);transform:rotate(-2.2deg);transform-origin:30% 100%}
.b-bresser__citaat::before{content:"\201C";position:absolute;left:clamp(1rem,.8rem + calc(.6*var(--vw)),1.5rem);top:-.34em;
font:700 clamp(4.5rem,4rem + calc(2*var(--vw)),6rem)/1 var(--font-titel);color:var(--b-signaal);pointer-events:none}
.b-bresser__citaat blockquote{margin:0}
.b-bresser__citaat p{margin:0;font:600 clamp(1rem,.93rem + calc(.32*var(--vw)),1.17rem)/1.55 var(--font-titel);letter-spacing:-.01em;text-wrap:pretty}
.b-bresser__citaat figcaption{display:flex;align-items:center;gap:.65rem;margin-top:1.05rem;padding-top:.9rem;border-top:1px solid var(--b-lijn);
font:600 .88rem/1.2 var(--font-kop);color:var(--b-bordeaux)}
.b-bresser__citaat figcaption img{width:2rem;height:2rem;border-radius:50%;box-shadow:0 0 0 1px var(--b-lijn)}
.b-bresser__feiten{list-style:none;margin:clamp(3rem,2.2rem + calc(2.4*var(--vw)),4.6rem) 0 0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.b-bresser__feiten li{position:relative;display:flex;align-items:flex-start;gap:.85rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.22)}
.b-bresser__ico{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--b-signaal)}
.b-bresser__ico svg{width:1.3rem;height:1.3rem}
.b-bresser__feiten b{display:block;font:600 1.02rem/1.3 var(--font-titel);color:#fff}
.b-bresser__feiten div span{display:block;margin-top:.3rem;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.8)}
@media(max-width:1000px){.b-bresser__feiten{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}}
@media(max-width:860px){
.b-bresser__rooster{grid-template-columns:minmax(0,1fr);grid-template-areas:"tekst" "beeld" "samen";grid-template-rows:auto}
.b-bresser__beeld{margin:clamp(2rem,calc(6*var(--vw)),2.6rem) calc(-1 * var(--pad,16px)) 0;padding-bottom:0}
.b-bresser__woord{display:none}
.b-bresser__foto{height:clamp(15rem,calc(62*var(--vw)),24rem);filter:none}
.b-bresser__raam{clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
.b-bresser__citaat{position:relative;left:auto;bottom:auto;width:auto;max-width:34rem;margin:-3.2rem var(--pad,16px) 0;transform:rotate(-1.4deg)}
.b-bresser__samen{margin:clamp(2.8rem,calc(8*var(--vw)),3.6rem) auto 0}
}
@media(max-width:520px){.b-bresser__feiten{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}}
.b-bresser--js :is(.b-bresser__ring,.b-bresser__boog,.b-bresser__naam){transition:translate .9s var(--b-ease)}
.b-bresser--js .b-bresser__boog{transition:translate .9s var(--b-ease),stroke-dashoffset 1s var(--b-ease) .1s,opacity .15s linear .1s}
.b-bresser--js :is(.b-bresser__lens,.b-bresser__jaar){transition:opacity .5s var(--b-ease) .6s}
.b-bresser--js:not(.is-in) :is(.b-bresser__boog,.b-bresser__naam--brocken){translate:-18px 0}
.b-bresser--js:not(.is-in) :is(.b-bresser__ring,.b-bresser__naam--bresser){translate:18px 0}
.b-bresser--js:not(.is-in) :is(.b-bresser__lens,.b-bresser__jaar){opacity:0}
.b-bresser--js .b-bresser__boog{stroke-dasharray:1 1.2}
.b-bresser--js:not(.is-in) .b-bresser__boog{stroke-dashoffset:1.1;opacity:0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.b-bresser__raam img{transition:transform .7s var(--b-ease)}
.b-bresser__foto:hover .b-bresser__raam img{transform:scale(1.05)}
.b-bresser__citaat{transition:transform .5s var(--b-ease)}
.b-bresser__citaat:hover{transform:rotate(0deg) translateY(-6px)}
.b-bresser__ico{transition:transform .4s var(--b-ease)}
.b-bresser__feiten li:hover .b-bresser__ico{transform:translateY(-3px) rotate(-8deg)}
.b-bresser__feiten li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--b-signaal);
transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--b-ease)}
.b-bresser__feiten li:hover::before{transform:scaleX(1)}
}
@media (max-width:860px) and (hover:hover) and (prefers-reduced-motion:no-preference){
.b-bresser__citaat:hover{transform:rotate(0deg) translateY(-4px)}
}
.b-bresser__citaat:focus-within{transform:rotate(0deg)}
@media (min-width:1441px){.b-bresser__raam{border-radius:0 var(--b-r-media) var(--b-r-media) 0}}