.cinema-slider{

  position: relative;

  width: 100vw;

  left: 50%;

  margin-left: -50vw;

  padding: 140px 0;

  overflow: hidden;

  background: #000;

}
 
/* ===== RED GLOW ===== */

.cinema-glow{

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at center,

    rgba(220,0,0,.45),

    rgba(0,0,0,.95) 70%);

  pointer-events: none;

}
 
/* ===== TRACK ===== */

.cinema-track{

  display: flex;

  align-items: center;

  gap: 6vw;

  will-change: transform;

}
 
/* ===== CARD ===== */

.cinema-card{

  position: relative;

  flex-shrink: 0;

  width: min(28vw, 520px);

  opacity: .35;

  transform: scale(.82);

  transition:

    transform .6s cubic-bezier(.22,.61,.36,1),

    opacity .4s ease,

    filter .4s ease;

}
 
.cinema-card img{

  width: 100%;

  display: block;

}
 
/* ===== TEXT OVERLAY ===== */

.card-overlay{

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  padding: 18px 20px;

  background: linear-gradient(to top,

    rgba(0,0,0,.85),

    rgba(0,0,0,0));

  color: #fff;

}
 
.card-overlay h3{

  font-family: 'League Spartan', sans-serif;

  font-weight: 400;

  font-size: 22px !important;

  letter-spacing: 0.3px;
color: #fff !important;
}
 
/* ===== STATES ===== */

.cinema-card.far{

  opacity: .25;

  transform: scale(.8);

}
 
.cinema-card.near{

  opacity: .6;

  transform: scale(.9);

}
 
.cinema-card.center{

  opacity: 1;

  transform: scale(1.25);

  z-index: 10;

  filter: drop-shadow(0 0 80px rgba(255,0,0,.7));

}
 
/* ===== LOCK RESET ===== */

.cinema-track.lock .cinema-card{

  transition: none !important;

}
	.card-overlay h3{
  color: #fff;   
	  margin: 0 auto;  
}
	
	.card-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


 
/* ===== MOBILE ===== */

@media (max-width: 768px) {

  .cinema-slider{ padding: 70px 0; }
 
  .cinema-card{

    width: 85vw;

    max-width: 340px;

    opacity: 0;

    transform: scale(0.95);

  }
 
  .cinema-card.far,

  .cinema-card.near{

    opacity: 0;

    pointer-events: none;

  }
 
  .cinema-card.center{

    opacity: 1;

    transform: scale(1);

    filter: drop-shadow(0 0 25px rgba(255,0,0,.6));

  }
 
  .card-overlay h3{

    font-size: 16px !important;

    text-align: center;

  }

}