:root{--cp-primary:#323232}body{background-color:#fff;color:var(--cp-primary);font-family:system-ui,sans-serif;line-height:1.2;margin:0 0 4em}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-comb{display:grid;gap:1.5em 2em;grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:960px){.col-2{grid-template-columns:repeat(2,1fr);>.wide{grid-column-start:span 2}&.just{grid-template-columns:repeat(2,auto);justify-content:space-between}}.col-3{grid-template-columns:repeat(3,1fr);>.wide{grid-column-start:span 3}}.col-4{grid-template-columns:repeat(4,1fr);>.wide{grid-column-start:span 4}>.half{grid-column-start:span 2}}.col-5{grid-template-columns:repeat(5,1fr);>.wide{grid-column-start:span 5}}.col-6{grid-template-columns:repeat(6,1fr);>.wide{grid-column-start:span 6}>.half{grid-column-start:span 3}>.third{grid-column-start:span 2}}.rat-7-5{grid-template-columns:7fr 5fr}.rat-5-7{grid-template-columns:5fr 7fr}.rat-8-4{grid-template-columns:8fr 4fr}.rat-4-8{grid-template-columns:4fr 8fr}.rat-9-3{grid-template-columns:9fr 3fr}.rat-3-9{grid-template-columns:3fr 9fr}.rat-1-a{grid-template-columns:1fr auto}.rat-a-1{grid-template-columns:auto 1fr}.rat-a-1-1{grid-template-columns:auto 1fr 1fr}}.section,footer,header,main,nav,section{display:grid;gap:1.5em 2em;padding:0 1em .5em;&.pad{padding:1em}}@media screen and (min-width:769px){.mid{margin:0 auto;width:769px}}@media screen and (min-width:1024px){.mid{width:960px}}@media screen and (min-width:1216px){.mid{width:1152px}}@media screen and (min-width:1408px){.mid{width:1344px}}nav{padding:1em;#logo{display:inline-flex;svg{display:inline-flex}}}@supports selector(& .foo){:root{--supports-nesting:#0f0}}:root{--color-green:#90ee90;--color-orange:orange}.test1{color:purple}.test2{color:#daa520}.test3{color:#6a5acd}.test4{color:green;&.prom{color:purple}span{background-color:olive}}