.carousel{width:calc(100% - .2rem);background:transparent;border:.1rem solid transparent;border-radius:1.5rem;padding:1.5rem .5rem;transition:background .2s ease,border-color .2s ease}.carousel:hover{background:hsl(var(--deep-background));border-color:hsla(var(--theme),25%)}.carousel.shows,.carousel.movies{min-height:18.2rem}.carousel .container{display:flex;justify-content:start;gap:1.25rem;width:100%;border-radius:1rem;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,black 1rem,black calc(100% - 1rem),transparent 100%)}.carousel .container::-webkit-scrollbar{display:none}.carousel .element{scroll-snap-align:center;position:relative;border-radius:.2rem;overflow:hidden;cursor:pointer;transition:transform .2s ease-in-out}.carousel .element:hover{transform:scale(.98)}.carousel .element:first-child{margin-left:1rem}.carousel .element:last-child{margin-right:1rem}.carousel.shows .element.show,.carousel.movies .element.movie{position:relative;display:block;width:10rem;height:15rem;border:1px solid #8888;border-radius:.7rem;transition:transform .2s ease,border-color .4s ease-out}.carousel.shows .element.show.loaded,.carousel.movies .element.movie.loaded{border-color:#8882}.carousel.shows .element.show .poster,.carousel.movies .element.movie .poster,.carousel.shows .element.show .title,.carousel.movies .element.movie .title{opacity:0;transition:opacity .4s ease-out}.carousel.shows .element.show.loaded .poster,.carousel.movies .element.movie.loaded .poster,.carousel.shows .element.show.loaded .title,.carousel.movies .element.movie.loaded .title{opacity:1}.carousel.shows .element.show .poster,.carousel.movies .element.movie .poster{width:100%;transition:opacity .4s ease-out}.carousel.shows .element.show .title,.carousel.movies .element.movie .title{position:absolute;bottom:0;left:0;width:100%;color:#fff;font-size:1rem;font-weight:800;text-align:center;padding:1rem;opacity:1;transition:opacity .2s ease-out;z-index:1}.carousel.shows .element.show:hover .title,.carousel.movies .element.movie:hover .title{opacity:0}.carousel.shows .element.show .title:before,.carousel.movies .element.movie .title:before{content:"";position:absolute;inset:0;background:#000;backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1em);mask-image:linear-gradient(0,black 0%,transparent 100%);-webkit-mask-image:linear-gradient(0,black 0%,transparent 100%);z-index:-1}
