.container{position:absolute;height:300px;width:600px;top:60px;left:calc(50% - 300px);display:flex}.card{display:flex;height:280px;width:200px;background-color:#17141d;border-radius:20px;box-shadow:-1rem 0 3rem #000;transition:.4s ease-out;position:relative;left:0;cursor:pointer;overflow:hidden}.card:not(:first-child){margin-left:-50px}.card:hover{transform:translateY(-20px);transition:.4s ease-out}.card:hover~.card{position:relative;left:50px;transition:.4s ease-out}.title{color:#fff;font-weight:300;position:absolute;left:20px;top:15px}.bar{position:absolute;top:100px;left:20px;height:5px;width:90px}.emptybar{background-color:#2e3033;width:100%;height:100%}.filledbar{position:absolute;top:0;z-index:3;width:0px;height:100%;background:#009ad9;background:linear-gradient(90deg,#009ad9,#d99300 65%,#ffba00);transition:.6s ease-out}.card:hover .filledbar{width:70px;transition:.4s ease-out}.navigation{position:absolute;top:50%;transform:translateY(-50%);width:800px;display:flex;justify-content:space-between;padding:0;z-index:10;left:calc(50% - 400px)}.arrow{color:#fff;font-size:24px;cursor:pointer;transition:transform .3s;background-color:#00000080;border-radius:50%;padding:8px;display:flex;align-items:center;justify-content:center}.arrow:hover{transform:scale(1.2);background-color:#000000b3}.cardImage{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.3;transition:opacity .4s ease-out}.card:hover .cardImage{opacity:.5}.cardContent{position:relative;z-index:1;padding:20px;width:100%;display:flex;flex-direction:column}.icon{font-size:24px;margin-bottom:10px}.beta{position:absolute;top:10px;right:10px;background-color:#fff3;color:#fff;padding:2px 6px;border-radius:10px;font-size:10px}.sliderContainer{position:relative;height:400px;width:100%;display:flex;justify-content:center;align-items:center;background-color:transparent;overflow:hidden;margin-top:-60px}