.library { margin-top:25px; margin-bottom:25px; }
.items { gap:20px; justify-content:center; }
.item { 
	position:relative; 
	padding:12px;
	background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	box-shadow:0 2px 6px rgba(0,0,0,0.2); 
	border-radius:8px; 
	overflow:hidden; 
	transition:0.3s; 
}
.item:hover{
	-webkit-box-shadow:0px 0px 20px 5px rgba(117,102,204,0.5);
	-moz-box-shadow: 0px 0px 20px 5px rgba(117,102,204,0.5);
	box-shadow: 0px 0px 20px 5px rgba(117,102,204,0.5);		
}
.item img {
	aspect-ratio: 2/3;
	width: 100%;
	object-fit: cover;
	border-radius:6px;
}
.item h6 { font-size:16px; margin-top:10px;margin-bottom:5px;color:#eee }
.meta { font-size:13px; color:#bbb }

.play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* hidden by default */
  transition: all 0.3s ease;
}

.play-overlay img {
	aspect-ratio: 2/2;
	background:red;
	border-radius:50%;
	width: 60px; 
	height: 60px;
}

.lightbox {
  position: relative;
  display: block;
}

.lightbox:hover .play-overlay,
.lightbox:active .play-overlay {
  opacity: 1; /* show on hover/tap */
}

@media (max-width: 768px){
	.item { padding:15px; border-radius:20 }
	.item img {	border-radius:15px}
	.item h6 { margin-top:10px; font-size:20px; color:#fff }
	.meta { font-size:14px; color:#e5e7eb !important }
	.meta b { color:#fff !important }
	.play-overlay img { width: 80px; height: 80px;border-radius:50% }
}

/* Vivid Carousel Meta Overrides */
.owl-carousel .item .meta {
  color: #e5e7eb !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-top: 8px;
}

.owl-carousel .item .meta b {
  color: #fff !important;
}