@layer components{.section{--section-col-text:inherit;--section-col-bg:var(--col-white);scroll-margin-top:var(--header-height);width:100%;padding:var(--section-padding-block) var(--section-padding-inline);display:flex;justify-content:center;position:relative;&:before{content:"";position:absolute;inset:0;z-index:-2;background-color:var(--section-col-bg)}.pipe-title{--pipe-title-text-col:var(--section-col-text);--pipe-title-bg-col:var(--section-col-bg)}}.section__content{position:relative;width:100%;max-width:calc(140rem + var(--section-content-padding-inline) * 2);padding-inline:var(--section-content-padding-inline)}}@layer components{.pipe-title{--pipe-title-text-col:var(--col-dark);--pipe-title-bg-col:var(--col-white);position:absolute;z-index:1;top:calc(-1 * var(--size-lg));left:calc(-1 * var(--size-xxs));display:inline-flex;gap:var(--size-xs);align-items:center;rotate:-5deg;&:after,&:before{content:"";position:absolute;border-radius:var(--size-md);overflow:hidden;z-index:-1}&:before{inset:-1rem -2rem;-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);-webkit-mask-image:radial-gradient(ellipse closest-side at center,black 67%,transparent);mask-image:radial-gradient(ellipse closest-side at center,black 67%,transparent)}&:after{inset:-.5rem -7.5rem;background-color:var(--pipe-title-bg-col);-webkit-mask-image:radial-gradient(ellipse closest-side at center,black 0,transparent);mask-image:radial-gradient(ellipse closest-side at center,black 0,transparent)}}.pipe-title__pipe{width:3rem;height:auto;filter:drop-shadow(var(--shadow-sm));&.pipe-title__pipe--end{scale:-1 1}}.pipe-title__text{font-size:var(--title-xxl);color:var(--pipe-title-text-col);text-transform:uppercase;translate:0 .2rem;filter:drop-shadow(0 0 .5rem var(--pipe-title-bg-col)) drop-shadow(0 0 .5rem var(--pipe-title-bg-col)) drop-shadow(0 0 .5rem var(--pipe-title-bg-col))}.pipe-title{&.pipe-title--sm{top:calc(-1 * var(--size-md));left:0;.pipe-title__pipe{width:2rem}.pipe-title__text{font-size:var(--title-lg)}}}}@layer components{.spacer{--size:var(--size-md);&.spacer--horizontal{margin-right:var(--size)}&.spacer--vertical{margin-bottom:var(--size)}&.spacer--xxs{--size:var(--size-xxs)}&.spacer--xs{--size:var(--size-xs)}&.spacer--sm{--size:var(--size-sm)}&.spacer--md{--size:var(--size-md)}&.spacer--lg{--size:var(--size-lg)}&.spacer--xl{--size:var(--size-xl)}&.spacer--xxl{--size:var(--size-xxl)}}}