:root{--spacing:.25rem}@property --scroll-fade-t{syntax:"*";inherits:false;initial-value:0px}@property --scroll-fade-b{syntax:"*";inherits:false;initial-value:0px}@property --scroll-fade-s{syntax:"*";inherits:false;initial-value:0px}@property --scroll-fade-e{syntax:"*";inherits:false;initial-value:0px}@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%, 40px)))}}@keyframes scroll-fade-reveal-b{0%{--scroll-fade-b:var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, 40px)))}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%, 40px)))}}@keyframes scroll-fade-reveal-e{0%{--scroll-fade-e:var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, 40px)))}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%, 40px)));--_scroll-fade-size-b:var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, 40px)));--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}.scroll-fade-x{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, 40px)));--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, 40px)));--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}:where([dir=rtl],[dir=rtl] *) .scroll-fade-x{--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%)}.scroll-fade-t{--_scroll-fade-size-t:var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, 40px)));--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}.scroll-fade-b{--_scroll-fade-size-b:var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, 40px)));--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}.scroll-fade-l{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, 40px)));--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-r{--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, 40px)));--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-s{--_scroll-fade-size-s:var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, 40px)));--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}:where([dir=rtl],[dir=rtl] *) .scroll-fade-s{--scroll-fade-mask:linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%)}.scroll-fade-e{--_scroll-fade-size-e:var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, 40px)));--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}:where([dir=rtl],[dir=rtl] *) .scroll-fade-e{--scroll-fade-mask:linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%)}.scroll-fade-none{--scroll-fade-mask:none}.scroll-fade-2{--scroll-fade-size:calc(var(--spacing) * 2)}.scroll-fade-4{--scroll-fade-size:calc(var(--spacing) * 4)}.scroll-fade-8{--scroll-fade-size:calc(var(--spacing) * 8)}.scroll-fade-12{--scroll-fade-size:calc(var(--spacing) * 12)}.scroll-fade-16{--scroll-fade-size:calc(var(--spacing) * 16)}.scroll-fade-24{--scroll-fade-size:calc(var(--spacing) * 24)}.scroll-fade-t-2{--scroll-fade-t-size:calc(var(--spacing) * 2)}.scroll-fade-b-2{--scroll-fade-b-size:calc(var(--spacing) * 2)}.scroll-fade-b-8{--scroll-fade-b-size:calc(var(--spacing) * 8)}.scroll-fade-s-2{--scroll-fade-s-size:calc(var(--spacing) * 2)}.scroll-fade-e-2{--scroll-fade-e-size:calc(var(--spacing) * 2)}@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}.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}.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}.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}.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}.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}.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}.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,.scroll-fade-y,.scroll-fade-x,.scroll-fade-t,.scroll-fade-b,.scroll-fade-l,.scroll-fade-r,.scroll-fade-s,.scroll-fade-e{-webkit-mask-image:none;mask-image:none}}