:root{--scroll-fx-translate-x:0;--scroll-fx-translate-y:0;--scroll-fx-translate-z:0;--scroll-fx-rotate-x:0;--scroll-fx-rotate-y:0;--scroll-fx-rotate-z:0;--scroll-fx-skew-x:0;--scroll-fx-skew-y:0;--scroll-fx-scale-x:1;--scroll-fx-scale-y:1;--scroll-fx-opacity:1;--scroll-fx-stroke-dashoffset:0}.scroll-fx{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx.scroll-fx--theme-transition,.scroll-fx.scroll-fx--theme-transition>*{transition:.3s}@media(min-width:32rem){.scroll-fx\@xs{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx\@xs.scroll-fx--theme-transition,.scroll-fx\@xs.scroll-fx--theme-transition>*{transition:.3s}}@media(min-width:48rem){.scroll-fx\@sm{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx\@sm.scroll-fx--theme-transition,.scroll-fx\@sm.scroll-fx--theme-transition>*{transition:.3s}}@media(min-width:64rem){.scroll-fx\@md{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx\@md.scroll-fx--theme-transition,.scroll-fx\@md.scroll-fx--theme-transition>*{transition:.3s}}@media(min-width:80rem){.scroll-fx\@lg{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx\@lg.scroll-fx--theme-transition,.scroll-fx\@lg.scroll-fx--theme-transition>*{transition:.3s}}@media(min-width:90rem){.scroll-fx\@xl{opacity:var(--scroll-fx-opacity)!important;transform:translate3d(var(--scroll-fx-translate-x),var(--scroll-fx-translate-y),var(--scroll-fx-translate-z)) rotateX(var(--scroll-fx-rotate-x)) rotateY(var(--scroll-fx-rotate-y)) rotate(var(--scroll-fx-rotate-z)) skewX(var(--scroll-fx-skew-x)) skewY(var(--scroll-fx-skew-y)) scaleX(var(--scroll-fx-scale-x)) scaleY(var(--scroll-fx-scale-y))!important;stroke-dashoffset:var(--scroll-fx-stroke-dashoffset)!important}.scroll-fx\@xl.scroll-fx--theme-transition,.scroll-fx\@xl.scroll-fx--theme-transition>*{transition:.3s}}.demo-scroll-fx-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.demo-scroll-fx-grid>:first-child{grid-column:1/4;grid-row:1/-1}.demo-scroll-fx-grid>:nth-child(2){grid-column:3/7;grid-row:2/5}