.web-showcase { padding: clamp(3rem,6vw,6rem) 0; }
.web-showcase > .shell { display:grid; grid-template-columns:minmax(15rem,.62fr) minmax(30rem,1.38fr); grid-template-areas:"intro screen" "action screen" "details details"; gap:1.5rem clamp(2.5rem,6vw,6rem); align-items:start; }
.web-showcase__intro { grid-area:intro; display:block; margin:0; align-self:end; }
.web-showcase > .shell > .web-screen { grid-area:screen; align-self:center; }
.web-showcase h2,.web-examples h2 { margin:0; font:400 clamp(2.8rem,5vw,5rem)/1.05 var(--display); letter-spacing:-.025em; text-wrap:balance; }
.web-showcase__intro p { max-width:52ch; margin:.75rem 0 0; }
.web-showcase .button-line { color:var(--paper); }
.web-showcase .button-line::after { color:var(--paper); }
.web-screen { display:block; text-decoration:none; }
.web-screen img,.web-showcase__details img { display:block; width:100%; height:auto; }
.web-screen:focus-visible { outline:3px solid currentColor; outline-offset:6px; }
.web-showcase__details { grid-area:details; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,4rem); }
.web-showcase__details figure { margin:0; }
.web-showcase__details figcaption { margin-top:.85rem; font-size:.95rem; line-height:1.5; }
.web-examples__lead { max-width:62ch; margin:1.5rem 0 3rem; color:var(--ink-soft); }
.web-example + .web-example { margin-top:clamp(4rem,8vw,7rem); }
.web-example__copy { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem; }
.web-example h3 { margin:0; font:400 clamp(2.5rem,4vw,4rem)/1.1 var(--display); }
.web-example__copy p { margin:0; max-width:58ch; }
.web-example__copy .button-line { margin-top:.75rem; }
.site-visit { display:flex; width:100%; min-height:68px; align-items:center; justify-content:space-between; gap:2rem; margin-top:1.25rem; padding:.8rem 1rem; border:1px solid currentColor; font-size:.76rem; }
.site-visit::after { margin-left:auto; font-size:1rem; }
.web-showcase > .shell > .site-visit { grid-area:action; align-self:start; margin:0; background:var(--paper); color:var(--ink); }
.web-showcase > .shell > .site-visit::after { color:var(--ink); }
@media(max-width:900px) {
 .web-showcase > .shell { display:grid; grid-template-columns:1fr; grid-template-areas:"intro" "screen" "action" "details"; gap:1.5rem; }
 .web-showcase__intro,.web-showcase__details,.web-example__copy { grid-template-columns:1fr; gap:1.5rem; }
 .web-showcase__intro { margin-bottom:1.5rem; }
 .web-showcase__details { gap:2rem; }
}