.koop-page-title { --koop-page-title-container: 1240px; --koop-page-title-gutter: clamp(24px,4.5vw,72px); --koop-page-title-height: 280px; position: relative; isolation: isolate; width: 100%; color: var(--mek-color-on-dark); background: linear-gradient(90deg,#0d172b 0%,#0d1b35 38%,#0d2346 100%); font-family: var(--mek-font-site-sans); text-align: left; } .koop-page-title,.koop-page-title * { box-sizing:border-box; } .koop-page-title__visual { position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; background:linear-gradient(90deg,#0d172b 0%,#0d1b35 38%,#0d2346 100%); } .koop-page-title__visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 52%; } .koop-page-title__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgb(11 19 36 / .74) 0%,rgb(12 23 42 / .58) 38%,rgb(13 29 56 / .22) 70%,transparent 100%); } .koop-page-title__inner { position:relative; width:min(var(--koop-page-title-container),calc(100% - var(--koop-page-title-gutter) * 2)); height:var(--koop-page-title-height); min-height:var(--koop-page-title-height); margin-inline:auto; padding-block:28px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .koop-page-title__copy { width:55%; max-width:660px; } .koop-page-title__heading { margin:0; color:#fff!important; font-family:var(--mek-font-site-sans); font-size:clamp(2.75rem,5.25vw,4.75rem); line-height:1.1; font-weight:var(--mek-font-weight-semibold); letter-spacing:-.055em; text-wrap:balance; overflow-wrap:anywhere; } .koop-page-title__breadcrumb { width:fit-content; max-width:100%; margin-top:18px; padding:5px 12px; border:1px solid rgb(255 255 255 / .11); border-radius:999px; color:rgb(226 235 247 / .80); background:rgb(4 12 28 / .26); box-shadow:inset 0 1px 0 rgb(255 255 255 / .035); backdrop-filter:blur(8px); } .koop-page-title__breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; padding:0; margin:0; list-style:none; font-size:.75rem; font-weight:var(--mek-font-weight-semibold); line-height:1.45; } .koop-page-title__breadcrumb li { min-width:0; } .koop-page-title__breadcrumb a { min-height:25px; display:inline-flex; align-items:center; gap:6px; color:rgb(226 235 247 / .78); text-decoration:none; border-radius:999px; transition:color var(--mek-transition); } .koop-page-title__breadcrumb a:hover { color:#fff; } .koop-page-title__breadcrumb a:focus-visible { outline:2px solid #7cbcff; outline-offset:3px; } .koop-page-title__home { width:13px; height:13px; flex:0 0 auto; } .koop-page-title__separator { display:flex; color:rgb(124 188 255 / .72); } .koop-page-title__separator svg { width:11px; height:11px; } .koop-page-title__current { color:#fff; overflow-wrap:anywhere; } @media(max-width:1199.98px){ .koop-page-title{--koop-page-title-height:264px} .koop-page-title__inner{padding-block:26px} .koop-page-title__copy{width:60%} .koop-page-title__heading{font-size:clamp(2.55rem,5.6vw,4rem)} .koop-page-title__visual img{object-position:58% center} .koop-page-title__visual::after{background:linear-gradient(90deg,rgb(11 19 36 / .80) 6%,rgb(12 23 42 / .60) 42%,rgb(13 29 56 / .20) 76%,transparent 100%)} } @media(max-width:991.98px){ .koop-page-title{--koop-page-title-height:252px;--koop-page-title-gutter:clamp(20px,3vw,32px)} .koop-page-title__inner{padding-block:24px} .koop-page-title__copy{width:68%} .koop-page-title__heading{font-size:clamp(2.35rem,5.9vw,3.4rem)} .koop-page-title__breadcrumb{margin-top:15px} } @media(max-width:767.98px){ .koop-page-title{--koop-page-title-height:244px;--koop-page-title-gutter:18px} .koop-page-title__inner{padding-block:20px;justify-content:center} .koop-page-title__copy{width:80%;max-width:520px} .koop-page-title__heading{font-size:clamp(2.1rem,8vw,3rem);line-height:1.06;letter-spacing:-.045em} .koop-page-title__visual img{object-position:64% center;opacity:.62;transform:scale(1.02)} .koop-page-title__visual::after{background:linear-gradient(90deg,rgb(12 20 38 / .92) 0%,rgb(12 23 42 / .78) 46%,rgb(13 30 57 / .26) 100%)} .koop-page-title__breadcrumb{margin-top:13px;padding:4px 10px} .koop-page-title__breadcrumb ol{gap:4px 7px;font-size:.72rem} .koop-page-title__breadcrumb a{min-height:24px;gap:5px} } @media(max-width:479.98px){ .koop-page-title{--koop-page-title-height:232px;--koop-page-title-gutter:16px} .koop-page-title__inner{padding-block:18px} .koop-page-title__copy{width:100%;max-width:none} .koop-page-title__heading{font-size:clamp(2rem,10.7vw,2.55rem);line-height:1.04;letter-spacing:-.04em} .koop-page-title__visual img{object-position:70% center;opacity:.44;transform:scale(1.035)} .koop-page-title__visual::after{background:linear-gradient(90deg,rgb(12 20 38 / .96) 0%,rgb(12 23 42 / .82) 52%,rgb(13 30 57 / .30) 100%)} .koop-page-title__breadcrumb{margin-top:12px;padding:4px 9px} .koop-page-title__breadcrumb ol{gap:4px 6px;font-size:.7rem} .koop-page-title__home{width:12px;height:12px} .koop-page-title__separator svg{width:10px;height:10px} } @media(max-width:359.98px){ .koop-page-title{--koop-page-title-height:224px;--koop-page-title-gutter:14px} .koop-page-title__heading{font-size:1.95rem} .koop-page-title__breadcrumb{max-width:100%} } @media(prefers-reduced-motion:reduce){ .koop-page-title__breadcrumb a{transition:none} .koop-page-title__visual img{transform:none} }