@font-face{font-family:"Cormorant";font-weight:400;src:url(media/cormorant-garamond-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";font-weight:500;src:url(media/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:400;src:url(media/cormorant-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Jost";font-weight:400;src:url(media/jost-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Jost";font-weight:500;src:url(media/jost-latin-500-normal.woff2) format("woff2");font-display:swap}


.x4{--u:min(calc(100vw / 1672),calc((100vh - 80px) / 941));padding-top:80px;--ink:#1f1812;--ink2:#3d3127;--goud:#a8834a;--kaart:#fbf3e9;
  position:relative;min-height:calc(941 * var(--u));background:#f6e8d8 url(media/xt-achtergrond.jpg) center top/cover no-repeat;color:var(--ink);overflow:hidden}
.x4 *,.x4 *::before,.x4 *::after{box-sizing:border-box}
.x4-in{position:relative;width:calc(1672 * var(--u));height:calc(941 * var(--u));margin:0 auto}
.x4-eb{position:absolute;left:calc(70 * var(--u));top:calc(22 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u));margin:0;
  font:500 calc(15.5 * var(--u))/1 "Jost",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}
.x4-eb::before{content:"";width:calc(61 * var(--u));height:1px;background:currentColor;opacity:.75}
.x4-h{position:absolute;left:calc(62 * var(--u));top:calc(46 * var(--u));margin:0;font:400 calc(91 * var(--u))/.9 "Cormorant",Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.x4-h em{display:block;font-style:italic;padding-left:calc(10 * var(--u))}
.x4-int{position:absolute;left:calc(1163 * var(--u));top:calc(143 * var(--u));margin:0;padding-left:calc(31 * var(--u));border-left:1px solid rgba(61,49,39,.4);
  font:500 calc(24 * var(--u))/1.38 "Cormorant",Georgia,serif;color:var(--ink);max-width:calc(470 * var(--u))}
.x4-int span{display:block}

.x4-rij{position:absolute;left:calc(25 * var(--u));top:calc(258 * var(--u));display:grid;grid-template-columns:repeat(4,calc(395 * var(--u)));gap:calc(14 * var(--u));margin:0;padding:0;list-style:none}
.xt.x4-k{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;height:calc(657 * var(--u));border-radius:calc(26 * var(--u));background:var(--kaart);cursor:pointer;
  box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(120,80,40,.10),0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(120,80,40,.06);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.x4-k b{position:absolute;left:calc(30 * var(--u));top:calc(28 * var(--u));font:500 calc(36 * var(--u))/1.1 "Cormorant",Georgia,serif;color:var(--ink);white-space:nowrap}
.x4-k .z{position:absolute;left:calc(31 * var(--u));top:calc(73 * var(--u));font:400 calc(23 * var(--u))/1.2 "Cormorant",Georgia,serif;color:var(--ink2);white-space:nowrap}
.x4-k picture{position:absolute;left:0;right:0;top:calc(127 * var(--u));height:calc(470 * var(--u) - 16px);border-radius:calc(22 * var(--u));overflow:hidden;background:#d9b994}
.x4-k img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.x4-k .vt{position:absolute;left:calc(30 * var(--u));right:calc(25 * var(--u));bottom:calc(25 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u))}
.x4-k .nr{font:400 max(12px,calc(16 * var(--u)))/1 "Jost",system-ui,sans-serif;letter-spacing:.12em;color:var(--goud)}
.x4-k .ln{flex:1;height:1px;background:rgba(168,131,74,.5)}
.x4-k .pijl{display:grid;place-items:center;width:calc(35 * var(--u));height:calc(35 * var(--u));border-radius:50%;border:1.4px solid var(--goud);color:var(--goud);transition:background .3s,color .3s}
.x4-k .pijl svg{width:46%;height:46%}
.x4-k:hover{transform:translateY(calc(-4 * var(--u)))}
.x4-k:hover img{transform:scale(1.025)}
@media (hover:hover){.x4-k:hover .pijl{background:var(--goud);color:#fff}} 
.x4-k:focus-visible .pijl{background:var(--goud);color:#fff}
.x4-k:focus-visible{outline:2px solid var(--goud);outline-offset:4px}
.x4-fic{position:absolute;right:calc(26 * var(--u));bottom:calc(6 * var(--u));margin:0;font:400 max(12px,calc(12 * var(--u)))/1 "Jost",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(61,49,39,.72)}


@media (min-width:901px){
  .x4-in{width:min(1760px,calc(100% - 2 * clamp(16px,4.5vw,120px)))}
  .x4-eb,.x4-h{left:0}
  .x4-int{left:calc(100% - 509 * var(--u))}
  .x4-rij{left:0;right:0;grid-template-columns:repeat(4,minmax(0,1fr))}
  .x4-fic{right:0}
  .x4{padding-bottom:28px} 
}


@media (max-width:900px){
  .x4{--u:1px;min-height:0;padding:56px 0 40px;background-size:auto 100%;background-position:70% top}
  .x4-in{width:auto;height:auto;margin:0}
  .x4-eb,.x4-h,.x4-int,.x4-rij,.x4-fic{position:static}
  .x4-eb{margin:0 16px;font-size:12px;gap:12px}
  .x4-eb::before{width:36px}
  .x4-h{margin:16px 16px 0;font-size:min(8.6vw,44px);line-height:1.02}
  .x4-h em{padding-left:0}
  .x4-int{margin:16px 16px 0;padding-left:14px;font-size:18px;line-height:1.4;max-width:none}
  .x4-int span{display:inline}
  .x4-rij{display:flex;gap:12px;margin-top:24px;padding:4px 16px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .x4-rij::-webkit-scrollbar{display:none}
  .x4-rij>li{flex:0 0 min(80vw,340px);scroll-snap-align:start}
  .x4-rij>li{display:flex}
  .xt.x4-k{display:flex;flex-direction:column;height:auto;padding:18px 0 0;border-radius:20px}
  .x4-k b,.x4-k .z,.x4-k picture,.x4-k .vt{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .x4-k b{display:block;padding:0 20px;font-size:27px;white-space:normal}
  .x4-k .z{display:block;padding:4px 20px 0;font-size:18px;white-space:normal}
  .x4-k picture{display:block;flex:none;margin-top:14px;height:auto;aspect-ratio:1;border-radius:16px}
  .x4-k .vt{display:flex;margin-top:auto;padding:14px 18px 16px 20px;gap:12px}
  .x4-k .nr{font-size:13px}
  .x4-k .pijl{width:30px;height:30px}
  .x4-k:hover{transform:none}
  .x4-fic{margin:2px 16px 0;font-size:12px}
}
@media (max-width:900px) and (max-height:680px){
  .x4{padding-top:36px}
  .x4-h{margin-top:12px}
  .x4-int{font-size:16px;margin-top:12px}
  .x4-rij{margin-top:16px}
  .x4-rij>li{flex-basis:min(74vw,300px)}
  .x4-k b{font-size:23px}
  .x4-k .z{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.x4 *{transition:none!important}}


.x4-nav{display:none}
@media (max-width:900px){
  .x4-rij{gap:12px;padding:4px 16px 14px;scroll-padding:0 16px}
  .x4-rij>li,.x4-rij>li:only-child{flex:0 0 calc(100vw - 44px)!important;scroll-snap-align:start;scroll-snap-stop:always}
  .x4-k img{object-position:50% 50%}
  .x4-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 16px 0}
  .x4-nav button{all:unset;box-sizing:border-box;cursor:pointer}
  .x4-pijlen{display:flex;gap:10px}
  .x4-pijlen button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.4px solid var(--goud);color:var(--ink);background:rgba(251,243,233,.7);transition:background .25s,color .25s,opacity .25s}
  .x4-pijlen button svg{width:18px;height:18px}
  .x4-pijlen button[disabled]{opacity:.35;cursor:default}
  .x4-pijlen button:focus-visible,.x4-stip:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
  @media (hover:hover){.x4-pijlen button:not([disabled]):hover{background:var(--goud);color:#fff}}
  .x4-stippen{display:flex;align-items:center;gap:2px}
  .x4-nav .x4-stip{display:grid;place-items:center;width:44px;height:44px;margin:0 -8px} 
  .x4-stip::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(61,49,39,.28);transition:width .3s,background .3s}
  .x4-stip[aria-current="true"]::before{width:22px;border-radius:4px;background:var(--goud)}
  .x4-fic{margin-top:6px}
  
  .x4-nav{display:grid;grid-template-columns:1fr auto 1fr}
  .x4-nav .x4-stippen{grid-column:2}
  .x4-nav .x4-pijlen{grid-column:3;justify-self:end}
  .x4-fic{margin-top:2px;text-align:center}
}
@media (prefers-reduced-motion:reduce){.x4-stip::before,.x4-pijlen button{transition:none}}

@media (min-width:601px) and (max-width:900px){
  .xt.x4-k{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;padding:0;column-gap:0}
  .x4-k picture{grid-column:1;grid-row:1/-1;margin:0;aspect-ratio:900/1057;max-height:min(72svh,620px);border-radius:20px 0 0 20px}
  .x4-k b{grid-column:2;grid-row:1;padding:30px 28px 0;font-size:32px}
  .x4-k .z{grid-column:2;grid-row:2;padding:8px 28px 0;font-size:21px}
  .x4-k .vt{grid-column:2;grid-row:4;padding:0 24px 24px 28px}
}

html.js:not(.ver) .x4{background-image:none}

@media (max-width:900px){.x4-k .vt .pijl{display:none}}