/* Change these settings to position whole boxes. No text or 3D code edits required. */
:root{
  --page-gutter:clamp(24px,4.9vw,82px);
  --copy-x:0px; --copy-y:0px; --copy-width:650px;
  --visual-x:0px; --visual-y:0px;
  --hero-left-fraction:1fr; --hero-right-fraction:1fr;
  --cards-gap:22px; --cards-columns:3;
}
body{padding:clamp(22px,3.3vw,54px) var(--page-gutter) 24px;display:flex;flex-direction:column}
.site-main{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-layout{display:grid;grid-template-columns:minmax(0,var(--hero-left-fraction)) minmax(0,var(--hero-right-fraction));align-items:center;min-height:500px;position:relative}
.copy-box{min-width:0;max-width:var(--copy-width);position:relative;z-index:1;transform:translate(var(--copy-x),var(--copy-y));padding:32px 0 18px}
.visual-box{position:relative;align-self:stretch;min-width:0;min-height:480px;transform:translate(var(--visual-x),var(--visual-y))}
.sources-box{position:relative}.site-footer{margin-top:30px}
@media(min-width:1000px) and (min-height:800px){body{height:100svh}.hero-layout{flex:1;min-height:0}.visual-box{min-height:0}}
@media(max-width:1050px){.hero-layout{min-height:460px}.visual-box{min-height:430px}}
@media(max-width:700px){body{padding:23px 22px 20px}.hero-layout{grid-template-columns:1fr}.copy-box{padding-top:40px;transform:none}.visual-box{height:350px;min-height:350px;transform:none}.site-footer{margin-top:24px}}