:root{--lower:150px;--upper:290px;--mid:40vmin;--ratio:0.075;--gap:clamp(var(--lower) * var(--ratio),var(--mid) * var(--ratio),var(--upper) * var(--ratio))}.background{background:linear-gradient(-15deg,#212c36 30%,#fff);-webkit-mask:linear-gradient(transparent,#fff 100px,transparent);mask:linear-gradient(transparent,#fff 100px,transparent)}article,section.inside{height:100%;position:relative;width:100%;max-width:120ch}body>section.inside{height:25vh}section.processSection>section{height:80vh}.centered{display:grid;place-items:center;width:100%;max-width:100%}.tiles{width:clamp(var(--lower),var(--mid),var(--upper));display:flex;flex-direction:column-reverse;justify-self:center;translate:0 calc(50% + (var(--gap)))}.tile{height:var(--gap);position:relative}@media (min-width:768px){hr.hr{width:calc(80% + 4rem);translate:-4rem 0}.tiles{justify-self:end}}.tile:after,.tile:before{content:"";position:absolute;width:100%;aspect-ratio:1160/521;background-size:cover;top:50%;left:50%;translate:-50% -50%}.tile:after{opacity:0;filter:hue-rotate(90deg)}.tile:first-of-type:after{filter:hue-rotate(var(--r,0deg)) brightness(2)}.tile:nth-of-type(4):after{opacity:1}.content{min-height:100vh;display:grid;grid-template:1fr 1fr/1fr;place-items:center;gap:4rem;position:sticky;top:0;padding:2rem}article.article{display:grid;position:absolute;height:100%;grid-template-rows:auto auto 1fr;top:0;left:0;font-weight:300}:is(.title-wrap,.content-wrap){line-height:1.5;-webkit-mask:linear-gradient(transparent,#fff 10px calc(100% - 10px),transparent);mask:linear-gradient(transparent,#fff 10px calc(100% - 10px),transparent)}@media (min-width:768px){article.article{grid-template-rows:1fr auto 1fr}.content{grid-template:1fr/1fr 1fr}}