@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");@import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap");:root{--w-column:200px}body{.carousel{margin:0;background-color:#232442;color:#fff;font-size:15px;font-family:Poppins;background-image:radial-gradient(#2b2e4f,#111126);height:100vh;overflow:hidden;position:relative;& *{box-sizing:border-box;margin:0;padding:0;list-style:none}& .list{width:min(1200px,90vw);margin:auto;height:100%;position:relative;& .item{position:absolute;inset:0;& figure{position:absolute;width:70%;top:50%;transform:translateY(-50%);& img{width:100%;transform:rotate(-30deg)}&::before{content:"";position:absolute;background-color:#0b0b1b;width:100%;height:100px;top:150%;left:50px;border-radius:50%;filter:blur(50px);-webkit-filter:blur(50px)}}& .content{position:absolute;z-index:20;width:70%;height:100%;right:var(--w-column);display:flex;flex-direction:column;justify-content:center;align-items:end;gap:20px;& .category{font-weight:500;color:#f41a2c;font-size:2em}& h2{font-family:"League Gothic";font-size:11em;line-height:1em}& .description{align-items:center;color:#fff8;max-width:400px;font-size:small;text-align:right;& *{align-items:center;color:#fff8;max-width:400px;font-size:small;text-align:right}& i{height:50px;color:#ffea7c;font-size:2em;border:1px solid #659cdf;border-radius:50%;display:flex;justify-content:center;align-items:center}}}& .more{display:grid;grid-template-columns:120px;gap:20px;grid-template-rows:35px;& a{text-decoration:none;border-radius:30px;font-family:"League Gothic";text-transform:uppercase;color:#fff;background-color:transparent;padding-left:20px;padding-top:5px;border:0;position:relative;border:2px solid transparent;background:linear-gradient(#242745,#242745)padding-box,linear-gradient(to right,#f8717c,#f41a2c)border-box;& i{margin-right:10px}}}}}& .arrows{width:min(1200px,90vw);display:flex;justify-content:space-between;position:absolute;top:52%;left:50%;transform:translate(-50%,-25px);pointer-events:none;z-index:100;& button{top:60%;width:50px;height:50px;border-radius:50%;border:1px solid #659cdf55;background-color:#232442;color:#fff7;font-size:large;cursor:pointer;pointer-events:auto;transition:.5s;&:hover{border:1px solid #659cdf;color:#fff}}}& .indicators{position:absolute;top:52%;height:var(--w-column);width:min(1200px,90vw);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;pointer-events:none;justify-content:end;gap:10px;& .number{font-family:"League Gothic";font-size:7vw}& ul{display:flex;gap:10px;& li{width:50px;height:5px;background-color:#fff;border-radius:10px;pointer-events:auto;cursor:pointer;transition:.5s;&.active{background-color:#f41a2c}}}}}}body{.carousel{ --calculation:1; /* 1 or - 1 */ & .list{& .item{transform:translateX(calc(100vw * var( --calculation)));transition:.5s;opacity:0;& figure{& img{transform:rotate(0);transition:transform .5s;transition-delay:.3s}}& .content{& .category,h2,.description,.more{ transform:translateX(calc(200px * var( --calculation))); transition:.7s; opacity:0; transition-delay:.3s; -webkit-transform:translateX(calc(200px * var( --calculation))); -moz-transform:translateX(calc(200px * var( --calculation))); -ms-transform:translateX(calc(200px * var( --calculation))); -o-transform:translateX(calc(200px * var( --calculation))); }& h2{transition-delay:.5s}& .description{transition-delay:.7s}& .more{transition-delay:.9s}}&.active{opacity:1;transform:translateX(0);& figure{& img{transform:rotate(-20deg)}}& .content{& .category,h2,.description,.more{transform:translateX(0);opacity:1}}}&.activeOld{ transform:translateX(calc( - 100vw * var( --calculation))); -webkit-transform:translateX(calc( - 100vw * var( --calculation))); -moz-transform:translateX(calc( -100vw * var( --calculation))); -ms-transform:translateX(calc( -100vw * var( --calculation))); -o-transform:translateX(calc( -100vw * var( --calculation))); }}}}}@media screen and (max-width:1023px) and (min-width:768px){:root{--w-column:100px}body{& .carousel{height:60vh;& .list{& .item{& .content{& h2{font-size:5em}}}}}}}@media screen and (max-width:767px){:root{--w-column:50px}body{& .carousel{height:100vh;& .list{& .item{& .content{justify-content:end;padding-bottom:100px;& h2{font-size:5em}}& figure{width:110%;transform:translateY(0);top:200px;left:-30px}}}& .indicators{& .number{font-size:10em;transform:translateX(50px);opacity:.5}}}}}