.slick-track { height: auto; } @import "../vendor/css/slick.css"; *,*:before,*:after { box-sizing: border-box; } #preloader { position: fixed; width: 100%; height: 100vh; z-index: 99999; overflow: visible; background: #1b1b3f; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; top: 0; left: 0 } @media (max-width: 1199px) { .hero { margin-top: 70px; } } .hero { .hero__slider { display: flex; flex-direction: row; // width: auto; flex-wrap: nowrap; overflow: hidden; // white-space: nowrap; } .movie-slide { padding-top: 50px; padding-bottom: 50px; position: relative; z-index: 1; // min-width: 100vw; // min-height: 695px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; // display: block; height: 695px; } .movie-slide:after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.56; z-index: -1; } } @media (max-width: 1199px) { .hero__slider .movie-slide { height: 600px; } } @media (max-width: 991px) { .hero__slider .movie-slide { height: 450px; } } @media (max-width: 767px) { .hero__slider .movie-slide { height: 400px; } } @media (max-width: 575px) { .hero__slider .movie-slide { height: 290px; } } @media (max-width: 400px) { .hero__slider .movie-slide { height: 195px; } }