/* A compact portfolio of concepts for an individual webdesign service. */
.example-section{padding:90px 0 80px}.examples-heading{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:80px;margin-bottom:40px}.examples-heading h2{font-size:clamp(38px,3.5vw,52px);letter-spacing:-2.5px;margin-top:20px;line-height:1.12}.examples-heading h2 em{color:#827d8c}.examples-heading .eyebrow{font-size:11px;letter-spacing:1.1px}.examples-heading>p{max-width:415px;font-size:14.5px;line-height:1.85;color:var(--muted);padding-bottom:4px}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px}.sample{min-width:0}.sample-preview{display:block;border:1px solid #d5d1dd;border-radius:7px;background:#e6e3eb;overflow:hidden;box-shadow:0 12px 28px -20px #39314442;transition:transform .4s ease,box-shadow .4s ease}.sample-preview:hover{transform:translateY(-5px);box-shadow:0 20px 32px -20px #39314460}.sample-browser{height:31px;background:#e6e3eb;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#5f5869;font-size:6px;letter-spacing:1px}.sample-browser>span:first-child{font-size:12px;letter-spacing:2px}.sample-browser>span:last-child{font-size:15px;letter-spacing:0}.sample-image{height:350px;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#242832}.sample-image>img{height:100%;object-fit:cover;transition:transform .8s ease;object-position:55% center}.sample-image:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#17182060,transparent 38%,#17182015 50%,#1718209e)}.sample-preview:hover img{transform:scale(1.035)}.sample-brand,.sample-headline,.sample-open{position:absolute;z-index:1;left:25px;right:25px}.sample-brand{top:23px;font-size:16px;letter-spacing:-.3px;font-weight:650}.sample-headline{bottom:78px;font-size:34px;line-height:1.1;letter-spacing:-1.5px;font-weight:500}.sample-wood .sample-headline,.sample-fjord .sample-headline{font-family:Georgia,serif;letter-spacing:-.8px;font-weight:400;font-size:36px}.sample-wood .sample-headline em,.sample-fjord .sample-headline em{font-style:italic}.sample-fjord .sample-brand{font-family:Georgia,serif;letter-spacing:2px;font-size:22px;font-weight:400}.sample-fjord .sample-image>img{object-position:65% center}.sample-electric .sample-headline{font-size:32px;letter-spacing:-1.3px}.sample-open{bottom:24px;border-top:1px solid #ffffff54;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.1px}.sample-open>i{font-size:20px;line-height:1;font-style:normal;transition:transform .3s}.sample-preview:hover .sample-open>i{transform:translate(2px,-2px)}.sample-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10.5px;letter-spacing:.6px;color:#6e6680;margin:24px 0 12px}.sample-meta>span:last-child{color:#6a5a80}.sample h3{font-size:18px;line-height:1.45;letter-spacing:-.5px;font-weight:550}.sample>p{font-size:13px;line-height:1.85;color:var(--muted);margin-top:11px;max-width:380px}.sample-note{display:flex;align-items:start;gap:13px;border-top:1px solid var(--line);padding-top:20px;margin-top:36px;font-size:12.5px;line-height:1.8;color:#6c6575}.sample-note>span{font-size:18px;color:#a18bb6;line-height:1.2}
@media(max-width:1150px){.sample-grid{gap:20px}.sample-image{height:310px}.sample-headline,.sample-wood .sample-headline,.sample-fjord .sample-headline{font-size:29px}.sample-electric .sample-headline{font-size:27px}.sample-brand,.sample-headline,.sample-open{left:20px;right:20px}.sample h3{font-size:16px}.sample>p{font-size:12.5px}.sample-meta{font-size:10.5px;gap:5px}.examples-heading{gap:50px}.examples-heading>p{font-size:14px}}
@media(max-width:900px){.example-section{padding:75px 0 65px}.examples-heading{gap:35px}.examples-heading h2{font-size:38px;letter-spacing:-2px}.sample-grid{grid-template-columns:1fr;gap:29px}.sample{display:grid;grid-template-columns:1.05fr 1fr;gap:0 28px;align-items:start}.sample-preview{grid-column:1;grid-row:1/4}.sample-image{height:245px}.sample h3{font-size:22px;margin-top:0;align-self:center}.sample>p{font-size:14px;margin-top:14px;align-self:start}.sample-meta{font-size:10.5px;margin:22px 0 15px;align-self:end}.sample-grid .sample{grid-template-rows:auto auto 1fr}.sample-headline,.sample-wood .sample-headline,.sample-fjord .sample-headline{font-size:32px}.sample-electric .sample-headline{font-size:29px}.sample-note{margin-top:30px}}
@media(max-width:550px){.example-section{padding:58px 0}.examples-heading{display:block;margin-bottom:28px}.examples-heading h2{font-size:36px;letter-spacing:-1.9px;margin-top:17px}.examples-heading>p{font-size:14px;line-height:1.8;margin-top:19px;padding:0}.examples-heading .eyebrow{font-size:10.5px}.sample-grid{gap:34px}.sample{display:block}.sample-image{height:320px}.sample-browser{height:29px}.sample-brand,.sample-headline,.sample-open{left:24px;right:24px}.sample-headline,.sample-wood .sample-headline,.sample-fjord .sample-headline{font-size:36px}.sample-electric .sample-headline{font-size:32px}.sample-brand{font-size:17px}.sample-meta{font-size:10.5px;margin:20px 0 11px}.sample h3{font-size:19px}.sample>p{font-size:14px;margin-top:10px}.sample-note{font-size:11.5px;gap:10px;margin-top:28px;padding-top:18px}}
@media(max-width:365px){.examples-heading h2{font-size:33px}.sample-image{height:290px}.sample-headline,.sample-wood .sample-headline,.sample-fjord .sample-headline{font-size:31px}.sample-electric .sample-headline{font-size:28px}.sample h3{font-size:18px}.sample>p{font-size:13px}.sample-meta{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.sample-preview,.sample-image>img,.sample-open>i{transition:none}.sample-preview:hover,.sample-preview:hover img{transform:none}}
body.motion-reduced .sample-preview,body.motion-reduced .sample-image>img{transition:none}

/* The Mosel collection and the retained VEYNHOLZ example. */
.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}.sample-image{height:365px}.sample-gastro .sample-headline,.sample-wine .sample-headline{font-family:Georgia,serif;font-size:40px;font-weight:400;letter-spacing:-1px}.sample-gastro .sample-headline em,.sample-wine .sample-headline em{font-style:italic}.sample-gastro .sample-browser{background:#e8ded2;color:#6e4349}.sample-wine .sample-browser{background:#e2e6dc;color:#4c5d4e}.sample-wine .sample-brand{font-family:Georgia,serif;letter-spacing:1.5px;font-size:22px;font-weight:400}.sample-gastro .sample-image:after{background:linear-gradient(180deg,#30201d33,transparent 35%,#271b196e)}.sample-wine .sample-image:after{background:linear-gradient(180deg,#13241766,transparent 40%,#1c301d99)}.sample-meta{font-size:11px}.sample h3{font-size:21px}.sample>p{font-size:14px;max-width:510px}
@media(max-width:1150px){.sample-image{height:330px}.sample-gastro .sample-headline,.sample-wine .sample-headline{font-size:36px}.sample-meta{font-size:10.5px}.sample h3{font-size:19px}.sample>p{font-size:13px}}
@media(max-width:900px){.sample-grid{grid-template-columns:1fr;gap:30px}.sample-image{height:245px}.sample-gastro .sample-headline,.sample-wine .sample-headline{font-size:31px}.sample h3{font-size:22px}.sample-meta{font-size:10.5px}.sample>p{font-size:14px}}
@media(max-width:550px){.sample-grid{gap:35px}.sample-image{height:320px}.sample-gastro .sample-headline,.sample-wine .sample-headline{font-size:36px}.sample h3{font-size:19px}.sample-meta{font-size:10.5px}.sample>p{font-size:14px}}
@media(max-width:365px){.sample-image{height:290px}.sample-gastro .sample-headline,.sample-wine .sample-headline{font-size:32px}.sample h3{font-size:18px}.sample>p{font-size:13px}.sample-meta{font-size:10.5px;gap:8px}}