:root{--spacing:.25rem}@property --scroll-fade-t{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-b{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-s{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-e{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-mask{syntax:"*";inherits:false}@keyframes scroll-fade-reveal-t{0%{--scroll-fade-t:0px}to{--scroll-fade-t:var(--_scroll-fade-size-t,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}}@keyframes scroll-fade-reveal-b{0%{--scroll-fade-b:var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}to{--scroll-fade-b:0px}}@keyframes scroll-fade-reveal-s{0%{--scroll-fade-s:0px}to{--scroll-fade-s:var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}}@keyframes scroll-fade-reveal-e{0%{--scroll-fade-e:var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))))}to{--scroll-fade-e:0px}}.scroll-fade,.scroll-fade-y{--_scroll-fade-size-t:var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--_scroll-fade-size-b:var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-block:linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%);-webkit-mask-image:var(--scroll-fade-mask,var(--scroll-fade-block));-webkit-mask-image:var(--scroll-fade-mask,var(--scroll-fade-block));mask-image:var(--scroll-fade-mask,var(--scroll-fade-block));-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}@supports (animation-timeline:scroll()){.scroll-fade,.scroll-fade-y{animation:1ms ease-in-out scroll-fade-reveal-t,1ms ease-in-out scroll-fade-reveal-b;animation-timeline:scroll(self y),scroll(self y);animation-range:0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%;animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade,.scroll-fade-y{--scroll-fade-t:var(--_scroll-fade-size-t);--scroll-fade-b:var(--_scroll-fade-size-b)}}.scroll-fade-x{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-inline:linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%);-webkit-mask-image:var(--scroll-fade-mask,var(--scroll-fade-inline));-webkit-mask-image:var(--scroll-fade-mask,var(--scroll-fade-inline));mask-image:var(--scroll-fade-mask,var(--scroll-fade-inline));-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}.scroll-fade-x:where([dir=rtl],[dir=rtl] *){--scroll-fade-inline:linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%)}@supports (animation-timeline:scroll()){.scroll-fade-x{animation:1ms ease-in-out scroll-fade-reveal-s,1ms ease-in-out scroll-fade-reveal-e;animation-timeline:scroll(self inline),scroll(self inline);animation-range:0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%;animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-x{--scroll-fade-s:var(--_scroll-fade-size-s);--scroll-fade-e:var(--_scroll-fade-size-e)}}.scroll-fade-t{--_scroll-fade-size-t:var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}@supports (animation-timeline:scroll()){.scroll-fade-t{animation:1ms ease-in-out scroll-fade-reveal-t;animation-timeline:scroll(self y);animation-range:0 var(--scroll-fade-reveal,calc(var(--spacing) * 24));animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-t{--scroll-fade-t:var(--_scroll-fade-size-t)}}.scroll-fade-b{--_scroll-fade-size-b:var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}@supports (animation-timeline:scroll()){.scroll-fade-b{animation:1ms ease-in-out scroll-fade-reveal-b;animation-timeline:scroll(self y);animation-range:calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%;animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-b{--scroll-fade-b:var(--_scroll-fade-size-b)}}.scroll-fade-l{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}@supports (animation-timeline:scroll()){.scroll-fade-l{animation:1ms ease-in-out scroll-fade-reveal-s;animation-timeline:scroll(self x);animation-range:0 var(--scroll-fade-reveal,calc(var(--spacing) * 24));animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-l{--scroll-fade-s:var(--_scroll-fade-size-s)}}.scroll-fade-r{--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}@supports (animation-timeline:scroll()){.scroll-fade-r{animation:1ms ease-in-out scroll-fade-reveal-e;animation-timeline:scroll(self x);animation-range:calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%;animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-r{--scroll-fade-e:var(--_scroll-fade-size-e)}}.scroll-fade-s{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}.scroll-fade-s:where([dir=rtl],[dir=rtl] *){--scroll-fade-mask:linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%)}@supports (animation-timeline:scroll()){.scroll-fade-s{animation:1ms ease-in-out scroll-fade-reveal-s;animation-timeline:scroll(self inline);animation-range:0 var(--scroll-fade-reveal,calc(var(--spacing) * 24));animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-s{--scroll-fade-s:var(--_scroll-fade-size-s)}}.scroll-fade-e{--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10))));--scroll-fade-mask:linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%);-webkit-mask-image:var(--scroll-fade-mask);-webkit-mask-image:var(--scroll-fade-mask);mask-image:var(--scroll-fade-mask);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}.scroll-fade-e:where([dir=rtl],[dir=rtl] *){--scroll-fade-mask:linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%)}@supports (animation-timeline:scroll()){.scroll-fade-e{animation:1ms ease-in-out scroll-fade-reveal-e;animation-timeline:scroll(self inline);animation-range:calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%;animation-fill-mode:both}}@supports not (animation-timeline:scroll()){.scroll-fade-e{--scroll-fade-e:var(--_scroll-fade-size-e)}}.scroll-fade-none{--scroll-fade-mask:none}