/* Template mixer variants (template-mix.cjs). Only active through data-mix-* on <html>. */
html[data-mix-hero=left] .hero-copy{margin-left:auto}
html[data-mix-hero=left] .hero-art{inset:0 auto 0 -24%}
html[data-mix-align=center] .hero-copy{width:100%;max-width:760px;margin:0 auto;align-items:center;text-align:center}
html[data-mix-align=center] .hero-art{inset:0 -10% 0 -10%;width:120%;opacity:.32}
html[data-mix-align=right] .hero-copy{align-items:flex-end;text-align:right}
html[data-mix-nav=bottom] .intro-stage>header{top:auto;bottom:22px;background:none;padding-bottom:0}
html[data-mix-nav=bottom] .intro-stage>header{position:absolute;left:0;right:0}
@media(max-width:700px){html[data-mix-hero=left] .hero-copy,html[data-mix-align] .hero-copy{width:100%;margin:0;text-align:left;align-items:flex-start}html[data-mix-align=center] .hero-copy{text-align:center;align-items:center}html[data-mix-nav=bottom] .intro-stage>header{position:relative;bottom:auto}}