.background:after{background:radial-gradient(50% 50% at 50% 50%,#0c0d0d00 42.31%,#0c0d0d);content:"";inset:0;position:absolute;z-index:2}.grid{grid-template-areas:". . ." ". logo ." ". . ." ". header ." "thumbs thumbs thumbs" ". . ." ". footer .";grid-template-columns:1rem 1fr 1rem;grid-template-rows:3rem max-content 2rem auto auto auto max-content}@media (min-width:640px){.grid{grid-template-rows:4rem max-content 4rem auto auto auto max-content}}.logo{grid-area:logo}.logo path:first-child{fill:#060709}.logo path:nth-child(3){fill:url(#a)}.logo path:nth-child(5){fill:url(#b)}h1{grid-area:header}.thumbs{grid-area:thumbs;--card-w:150px;--scrollbar-y:0px;--scrollbar-x:12px;--padding:calc((10vw - var(--scrollbar-y))/2);--width:calc(100vw - var(--scrollbar-y));--height:300px;margin-left:auto;margin-right:auto;max-width:90vw;width:100%}.thumbs .inner{margin:0;width:100%}.thumbs .inner .flex{height:calc(var(--height) + 100px);justify-content:flex-start;margin-left:calc(var(--padding)*-1);-webkit-mask-image:linear-gradient(180deg,#000,#000 300px,transparent 400px);mask-image:linear-gradient(180deg,#000,#000 300px,transparent 400px);-webkit-mask-position:top;mask-position:top;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 385px;mask-size:100% 385px;overflow-x:auto;overflow-y:hidden;padding:2rem var(--padding) 0;width:var(--width)}.thumbs .inner .flex>a,.thumbs .scrollbar{height:var(--height)}.thumbs .scrollbar{--height:20px;--radius:10px;--thumb:10px;--bg:3px;--animation:.2s ease-out;cursor:pointer;width:100%}.thumbs .scrollbar:after{content:"";height:var(--bg);inset:0;margin:auto;position:absolute;transition:all var(--animation);--tw-bg-opacity:1;background-color:rgb(52 69 81/var(--tw-bg-opacity,1));border-radius:var(--scrollbar-x);z-index:-1}.thumbs .scrollbar:hover{--thumb:20px}.thumbs .scrollbar:hover:after{--tw-bg-opacity:1;background-color:rgb(53 78 95/var(--tw-bg-opacity,1))}.thumbs .scrollbar input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:var(--radius);height:var(--height);outline:none}.thumbs .scrollbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb);width:60px;--tw-bg-opacity:1;background-color:rgb(161 224 149/var(--tw-bg-opacity,1));border-radius:var(--radius);cursor:pointer;-webkit-transition:all var(--animation);transition:all var(--animation)}.thumbs .scrollbar input[type=range]::-moz-range-thumb{height:var(--thumb);width:60px;--tw-bg-opacity:1;background-color:rgb(161 224 149/var(--tw-bg-opacity,1));border:none;border-radius:var(--radius);cursor:pointer;-moz-transition:all var(--animation);transition:all var(--animation)}.thumbs .scrollbar input[type=range]::-ms-thumb{height:var(--thumb);width:60px;--tw-bg-opacity:1;background-color:rgb(161 224 149/var(--tw-bg-opacity,1));border-radius:var(--radius);cursor:pointer;-ms-transition:all var(--animation);transition:all var(--animation)}.thumbs ::-webkit-scrollbar{height:var(--scrollbar-x);width:var(--scrollbar-x)}.thumbs ::-webkit-scrollbar-thumb{background-color:rgb(52 69 81/var(--tw-bg-opacity,1));border-radius:var(--scrollbar-x);--tw-bg-opacity:1;background-color:rgb(161 224 149/var(--tw-bg-opacity,1))}.thumbs ::-webkit-scrollbar-track{background:#0000001a;background:#ffffff24;border-radius:var(--scrollbar-x);margin-left:var(--padding);margin-right:var(--padding)}.image:after{border:1px solid #fff;border-radius:.5rem;bottom:0;content:"";height:100%;left:0;-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-position:bottom;mask-position:bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--mask-size);mask-size:var(--mask-size);opacity:0;position:absolute;right:0;transition-duration:.5s;transition-timing-function:cubic-bezier(.04,.23,.33,.94)}.image:after,.reflection,.reflection img{pointer-events:none}.reflection img{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-position:bottom;mask-position:bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--mask-size);mask-size:var(--mask-size);transition-duration:.5s;transition-timing-function:cubic-bezier(.04,.23,.33,.94)}.thumb{--mask:linear-gradient(0deg,#000 10%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.2) 70%,transparent);--mask-size:100% 10%}.thumb:hover{--mask-size:100% 45%}.thumb:hover .image:after{opacity:.2}footer{grid-area:footer}
