.highlight-carousel{position:relative;overflow:hidden;width:100%;height:600px}.container-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.card{position:absolute;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}.card:not(:first-child){opacity:0}.card.active{opacity:1;visibility:visible}.card-background{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;z-index:1}.card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,0));z-index:2;pointer-events:none}.card-header{position:relative;z-index:2;padding:10px;margin:0 50px;max-width:40%;margin-top:250px;border-top-left-radius:10px;border-top-right-radius:10px}.card-header h2{color:#fff}.card-body{position:relative;z-index:2;padding:10px;color:#fff;margin:0 50px;max-width:40%;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.carousel-arrow-next,.carousel-arrow-prev{position:absolute;background-color:transparent;top:45%;color:#fff;border:none;padding:0;cursor:pointer;z-index:10;transition:transform .2s ease,color .2s ease;display:flex;align-items:center}.carousel-arrow-prev svg,.carousel-arrow-next svg{fill:#000;width:48px;height:48px}.carousel-arrow-prev:hover,.carousel-arrow-next:hover{background-color:transparent;transform:scale(.9);color:rgba(22,22,22,.664)}.carousel-arrow-prev:focus,.carousel-arrow-next:focus{background-color:transparent}.carousel-arrow-prev:active,.carousel-arrow-next:active{transform:scale(.85)}.carousel-arrow-next{right:0}.container-prev{left:10px}.container-next{right:10px}.container-pagination{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);text-align:center;z-index:10;width:100%}.carousel-page-pag{position:relative;border:none;cursor:pointer;background-color:gray;font-size:1em;margin:0 5px;padding:5px;border-radius:5px;overflow:hidden;width:30px;transition:width .4s ease}.carousel-page-pag[aria-current=true]{width:60px}.carousel-page-pag-slider{position:absolute;bottom:0;left:0;height:10px;background-color:#ff0;width:0;transition:width 5s ease}.carousel-page-pag[aria-current=true] .carousel-page-pag-slider{width:100%}.carousel-page-pag:hover{color:blue}@media (max-width:1200px){.highlight-carousel{height:500px}}@media (max-width:768px){.container-prev,.container-next{display:none}.highlight-carousel{height:450px}.card-header{max-width:100%;margin-top:200px}.card-body{max-width:100%}}@media (max-width:480px){.highlight-carousel{height:250px}.card-header{max-width:100%;margin-top:130px}.card-body{display:none}}