/* Mask the actual image rectangle, not the wider section with empty sidebars. */
@media(min-width:621px){
 body.systemdesign-overview-page .sd-overview::before{
  inset:auto;
  left:50%;
  top:50%;
  width:min(100%,1280px);
  height:auto;
  aspect-ratio:1672 / 941;
  transform:translate(-50%,-50%);
  background-size:100% 100%;
  background-position:center;
  opacity:.36;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.35) 38%,#000 64%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.35) 38%,#000 64%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
 }
}
@media(min-width:621px) and (max-width:1000px){
 body.systemdesign-overview-page .sd-overview::before{
  top:170px;
  transform:translateX(-50%);
  opacity:.32;
 }
}
/* Preserve all four columns and the approved mobile scale; soften side edges. */
@media(max-width:620px){
 body.systemdesign-overview-page .sd-overview::before{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 78%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
 }
}

@media(max-width:620px){
 body.systemdesign-overview-page.pillars-fixed-v399 .sd-overview::before{
  position:fixed;
  inset:var(--pillars-top-v399,0px) 0 auto;
  width:100%;height:auto;aspect-ratio:1672 / 941;
  transform:none;
  background-size:100% auto!important;
  background-position:center top!important;
  clip-path:inset(var(--pillars-clip-top-v399,0px) 0 var(--pillars-clip-bottom-v399,0px) 0);
 }
}