:root{--height:calc(80vh - 50px);--width:450px}.carousel{display:grid;transform:translateZ(.1px)}.carousel__list{display:flex;list-style:none;padding:2em 0 3em;margin:0}.carousel__item,.carousel__list{overflow:hidden;contain:layout;isolation:isolate}.carousel__item{display:grid;position:relative;align-content:start;margin:0 10px;padding:0;flex:1 1 10%;height:var(--height);background:hsla(0,0%,100%,.2);border-radius:16px;transform:translateZ(.1px);box-shadow:0 3px 15px 2px rgba(0,0,0,.4),0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1),inset 0 0 0 1px hsla(0,0%,100%,.05);transition:transform .3s ease,flex-basis .3s ease}.carousel__item,.carousel__item *{transition:all .6s cubic-bezier(.55,.24,.18,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.carousel__contents,.carousel__image{width:var(--width);height:auto}.carousel__item:hover{flex-basis:calc(var(--width) / 2);transition:all .3s ease}.carousel__item[data-active]{flex-basis:var(--width);flex-grow:0;background-image:radial-gradient(ellipse at 0 0,rgba(0,0,0,.7) 20%,transparent 80%)}.carousel__item[data-active]:hover{transform:scale(1.1);transition:transform .3s ease-out,flex-basis .3s ease-out}@media screen and (max-width:800px){.carousel__item{flex-basis:15%}}@media screen and (max-width:600px){.carousel__item{flex-basis:10%;margin:0 5px;border-radius:8px;font-size:3vw}.carousel__item[data-active]{flex-basis:45%;flex-grow:0}.carousel__item:nth-child(3),.carousel__item:nth-child(7){flex:0 0 10px}.carousel__item:nth-child(2),.carousel__item:nth-child(8){flex:0 0 5px;transform:translateX(-50px)}.carousel__item:nth-child(8){transform:translateX(50px)}.carousel__item:first-child,.carousel__item:nth-child(n+9){flex:0 0 0px;margin:0;box-shadow:none;opacity:0!important}.carousel__item:not(:nth-child(n+5)) img,.carousel__item:nth-child(n+7) img{opacity:.8}.carousel__item:not(:nth-child(n+4)) *,.carousel__item:nth-child(n+7) *{opacity:0!important}}@media screen and (min-width:600px){.carousel__item:nth-child(10),.carousel__item:nth-child(3){flex:0 0 10px}.carousel__item:nth-child(11),.carousel__item:nth-child(2){flex:0 0 5px;transform:translateX(-50px)}.carousel__item:nth-child(11){transform:translateX(50px)}.carousel__item:first-child,.carousel__item:nth-child(n+12){flex:0 0 0px;margin:0;box-shadow:none;opacity:0!important}.carousel__item:not(:nth-child(n+5)) img,.carousel__item:nth-child(n+9) img{opacity:.8}.carousel__item:not(:nth-child(n+4)) *,.carousel__item:nth-child(n+10) *{opacity:0!important}}.carousel__item img{display:block;position:absolute;width:var(--width);height:100%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;aspect-ratio:2/3;-o-object-fit:cover;object-fit:cover;filter:saturate(.2) contrast(.75) brightness(1.1)}.carousel__item:after{content:"";position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:1;background:linear-gradient(160deg,rgba(2,0,36,0) 40%,rgba(109,58,221,.5) 70%,rgba(0,255,246,.6));transition:all .66s cubic-bezier(.55,.24,.18,1)}.carousel__item[data-active]:after{transform:translateY(100%)}.carousel__item[data-active],.carousel__item[data-active] *{opacity:1;filter:none}.carousel__contents{display:flex;flex-direction:column-reverse;justify-content:start;min-height:200px;padding:1em;z-index:2;background-size:170% 200px;background-repeat:no-repeat;position:absolute;bottom:0;left:0;transition:all .3s ease}.carousel__item[data-active] .carousel__contents{background-image:radial-gradient(ellipse at 0 0,rgba(0,0,0,.9) 60%,transparent 80%)}.carousel__item[data-active]:hover .carousel__contents{background-position:100% 100%}.carousel__contents .user__name{color:#e8eff4;font-size:1.75em;font-weight:600;letter-spacing:.8px;text-shadow:0 1px 0 rgba(0,0,0,.3)}.carousel__contents .user__title{font-family:lexend;font-weight:500;text-transform:uppercase;color:transparent;background:linear-gradient(270deg,#43ff00,#00fff7)}.carousel__contents .user__description,.carousel__contents .user__title{font-size:.875em;letter-spacing:1.25px;background-clip:text;-webkit-background-clip:text;opacity:.85;text-wrap:balance;margin-bottom:.5em}.carousel__contents .user__description{color:#fff}.carousel__contents .user__description,.carousel__contents .user__name,.carousel__contents .user__title{margin:0;line-height:1.1;opacity:0;transform:translateX(-200px);transition-duration:1s}@media screen and (max-width:800px){.carousel__item img{width:calc(var(--width) * .5)}.carousel__contents{transform:translateX(-100%) rotate(90deg);transform-origin:bottom right;align-items:end;justify-content:end;background-image:radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.4) 0,transparent 50%);background-position:-100% 100%;flex-direction:column;position:absolute;bottom:0;left:0;text-align:right}[data-active] .carousel__contents{background-position:100% 100%}.carousel__contents .user__name,.carousel__contents .user__title{max-width:70vh;transform:translateX(200px)}}[data-active] .carousel__contents *{transform:translateX(0);transition-duration:.66s;opacity:1}[data-active] .carousel__contents .user__name{transition-delay:.1s}[data-active] .carousel__contents .user__title{opacity:.85;transition-delay:.05s}.carousel__nav{padding:1em;justify-self:end;grid-row:1;display:flex;justify-content:space-between;gap:1em}button{display:flex;gap:.5em;padding:.5em 1.5em}button span,button svg{margin:0;padding:0;fill:none}button path{fill:currentColor}