/* One content width and alignment for the home page and all case studies. */
body>main{width:100%;max-width:1200px;padding-left:52px;padding-right:52px}
body>main:not(.case-study):not(.grocery-case):not(.weather-case)>section{padding-left:0;padding-right:0}
@media(min-width:1200px){
 body>main{width:756px;max-width:756px;margin-left:max(52px,calc((100vw - 1200px)/2 + 52px));margin-right:0;padding-left:0;padding-right:0}
}
@media(max-width:1000px){body>main{padding-left:40px;padding-right:40px}}
@media(max-width:600px){body>main{padding-left:20px;padding-right:20px}}
/* Narrow containers must also reflow their children. */
.hero{flex-direction:column;gap:24px}.hero .expertise{width:100%;padding-left:0;padding-right:0}
.project{flex-direction:column}.project .visual{width:100%;height:320px;min-height:320px}
.article-feature{flex-direction:column}.article-feature .article-art{width:100%;flex:0 0 auto}.article-feature .article-art img{width:100%;max-width:none}
@media(max-width:600px){.project .visual{height:240px;min-height:240px}}

/* Home page follows the reference's full container, without the case navigation column. */
.home-page>main{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:52px;padding-right:52px}
@media(min-width:1001px){
 .home-page .hero{flex-direction:row;gap:64px}
 .home-page .hero .expertise{width:400px;padding:20px 44px}
 .home-page .project{flex-direction:row}
 .home-page .project .visual{width:50%;height:auto;min-height:336px}
 .home-page .article-feature{flex-direction:row}
 .home-page .article-feature .article-art{width:444px;flex:0 0 444px}
}
@media(max-width:1000px){.home-page>main{padding-left:40px;padding-right:40px}}
@media(max-width:600px){.home-page>main{padding-left:20px;padding-right:20px}}