:root{
  --active-text-color:#3b42a4;
  --inactive-text-color:#888888;
  --active-bg-color:#f8f9fa;
  --playlist-max-height:520px;
}

.psipw-video-gallery-container{
  width:100%;
  margin:0 auto;
  background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

.psipw-main-video-wrapper{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  background:#000;
}

.psipw-main-video-wrapper iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:none;
}

.psipw-playlist{
  display:flex;
  flex-direction:column;
  padding:10px 0;

  /* SCROLLER when many videos */
  max-height: var(--playlist-max-height);
  overflow-y:auto;
}

.psipw-playlist-item{
  display:flex;
  align-items:center;
  padding:10px 20px;
  cursor:pointer;
  transition:background-color .2s ease;
}

.psipw-playlist-item:hover{ background:#f1f1f1; }
.psipw-playlist-item.is-active{ background: var(--active-bg-color); }

.psipw-playlist-thumb{
  width:180px;
  aspect-ratio:16/9;
  object-fit:cover;
  margin-right:20px;
  transition:filter .3s ease;
}

.psipw-playlist-item:not(.is-active) .psipw-playlist-thumb{ filter:grayscale(100%); }

.psipw-playlist-title{
  font-size:1.4rem;
  font-weight:bold;
  transition:color .3s ease;
}

.psipw-playlist-item.is-active .psipw-playlist-title{ color: var(--active-text-color); }
.psipw-playlist-item:not(.is-active) .psipw-playlist-title{ color: var(--inactive-text-color); }

@media (max-width:768px){
  .psipw-playlist-thumb{ width:120px; }
  .psipw-playlist-title{ font-size:1.1rem; }
}