.layout{--gap: clamp(1rem, 6vw, 3rem);--content: min(65ch, 100% - var(--gap) * 2);--popout: minmax(0, 2rem);--feature: minmax(0, 5rem);--full: minmax(var(--gap), 1fr);display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]}.layout>*{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.prose>div:has(pre){grid-column:popout}.prose>p:has(img){grid-column:feature;display:flex;justify-content:center}img{--graphite: hsl(0 0% 20%);box-shadow:6px 6px 0 var(--graphite);border:3px solid var(--graphite)}code{counter-reset:line}code>.line:before{counter-increment:line;content:counter(line);display:inline-block;width:1rem;margin-right:2rem;text-align:right;color:gray}code[data-line-numbers-max-digits="2"]>.line:before{width:2rem}code[data-line-numbers-max-digits="3"]>.line:before{width:3rem}
