/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.cinema-carousel {
   position: relative;
}

.cinema-carousel::after {
   content: "";
   width: 60px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0)0, #fff 100%);
   will-change: opacity;
   pointer-events: none;
}

.cinema-carousel-inner {
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   gap: 3%;
   scrollbar-width: thin;
   scrollbar-color: #db3069 transparent;
   padding-right: 100px;
}

.cinema-carousel-inner::-webkit-scrollbar-thumb {
   background: #db3069;
   border-radius: 10px;
}

.cinema-carousel-inner::-webkit-scrollbar-thumb:hover {
   background: #b12755;
}

.cinema-item {
   flex: 0 0 10vw;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.cinema-item img {
   width: 100%;
   height: 14vw;
   border-radius: 5px;
   object-fit: contain;
}

.cinema-item h3 {
   font-size: 19px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

.cinema-item p {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-top: -15px;
}

.film-information {
   display: flex;
   width: 90%;
   justify-content: space-between;
   align-items: center;
}

.film-date {
   font-weight: 500;
   color: darkgrey;
   font-size: 0.75rem;
}

.film-votation {
   padding: 4px 8px;
   border-radius: 50px;
   background-color: #DB3069;
   color: #fff;
   font-size: 0.75rem;
}

.genres-div {
   position: relative;
   z-index: 9999;
   top: 2.3vw;
   width: fit-content;
   left: 0.5vw;
}

.cinema-genres {
   background-color: purple;
   color: white;
   font-size: 14px;
   padding: 2px 8px;
   border-radius: 5px;
   display: -webkit-box;
   -webkit-line-clamp: 1 !important;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

@media screen and (max-width: 1920px) {
   .genres-div {
      top: 2.8vw;
   }
}

@media screen and (max-width: 1440px) {
   .cinema-item img {
      height: 28vw;
   }

   /* .genres-div{ 
      right: 7vw;
      bottom: 26.2vw;
   
    } */

   .genres-div {
      top: 4.3vw;
   }

   .cinema-item {
      flex: 0 0 22vw;
   }

   .cinema-item h3 {
      padding: 0px 20px;
   }

   .film-information {
      width: 74%;
   }

}

@media screen and (max-width: 1280px) {
   .film-information {
      width: 84%;
   }

   /* .genres-div{ 
      right: 6.3vw;
    } */
}

@media screen and (max-width: 1024px) {
   .genres-div {
      top: 5.3vw;
   }
}

@media screen and (max-width: 992px) {
   .cinema-item img {
      height: 50vw;
   }

   /* .genres-div{ 
      right: 12.2vw;
      bottom: 47.2vw;
   
    } */

   .genres-div {
      top: 7.5vw;
   }

   .cinema-item h3 {
      font-size: 20px;
      padding: 0px 15px;
   }

   .film-information {
      width: 79%;
   }

   .cinema-item {
      flex: 0 0 40vw;
   }
}

@media screen and (max-width: 767px) {
   .cinema-item img {
      height: 54vw;
   }

   .genres-div {
      top: 12.3vw;
      left: 0.5vw;
   }

   .cinema-item h3 {
      font-size: 20px;
   }

   .film-information {
      width: 82%;
   }

   /* .cinema-item {
      flex: 0 0 42vw;
   } */

   .cinema-item p {
      display: none;
   }

   .film-date {
      display: block !important;
      font-size: 12px !important;
   }

   .film-votation {
      display: block !important;
      font-size: 12px !important;
   }

   .cinema-genres {
      display: block !important;
      font-size: 12px;
   }
}

@media screen and (max-width: 430px) {
   .cinema-item h3 {
      font-size: 18px;
   }
}