.content-grid{--c-bg-light: #f3f3f4;--c-fg-light: #2f2f2f;--c-yellow: #ddca00;--margin-block: clamp(6rem, 20vw, 15rem);--vertical-padding: 2.5rem;--base-font-size: 1.125rem}.content-grid section{--padding-inline: clamp(1rem, 7vw, 6rem);--content-max-width: 60rem;--breakout-max-width: 80rem;--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);display:grid;grid-template-columns:minmax(var(--padding-inline),1fr) [breakout-start] minmax(0,var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2),var(--content-max-width)) [content-end] minmax(0,var(--breakout-size)) [breakout-end] minmax(var(--padding-inline),1fr)}.content-grid section>*{grid-column:content}.content-grid section>.breakout{grid-column:breakout}.content-grid section.blue-dark{background:var(--blue-dark);color:#fff}.content-grid section.blue{background:var(--blue);color:#fff}.content-grid section.light{background:var(--c-bg-light);color:var(--c-fg-light)}.content-grid section.pop{background:var(--c-yellow);color:var(--blue-dark)}.content-grid :where(section>div){margin-block:var(--margin-block)}.content-grid :where(h1,h2){word-break:break-word;-webkit-hyphens:auto;hyphens:auto;text-wrap:balance}.content-grid :where(h2){margin-block-end:var(--vertical-padding);font-size:clamp(2rem,12vw,3.5rem);line-height:1}.content-grid :where(p){margin-block-end:2rem;font-size:var(--base-font-size);text-wrap:pretty}.content-grid :where(p:last-of-type){margin-block-end:var(--vertical-padding)}.content-grid :where(a,button):focus-visible{outline-offset:var(--focus-outline-offset);outline:var(--focus-outline-color) var(--focus-outline-style) var(--focus-outline-width);border-radius:var(--focus-outline-border-radius)}.content-grid .pop :where(a,button){--focus-outline-color: #0066ff}