.card {
    position: relative;
    z-index: 1;
    min-width: unset;
    min-height: unset;
    padding: 1em 1em;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
}

.card .video_link{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
}

.card:not(.locked) .card-image{
  overflow: hidden;
}
.card:not(.locked) .card-image img{
  transition: .3s all ease-in-out;
}
.card:not(.locked):hover .card-image img{
  transform: scale(1.1);
}

.card:not(.locked) .card-title{
  transition: .3s all ease-in-out;
}
.card:not(.locked):hover .card-title{
  color: #D25800;
}

.card.locked{
  cursor: unset;
}

.card.locked .card-image{
  position: relative;
}

.card.locked .card-image:after{
  content: '';
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  height: 100%;
  background: #00000080;
  transition: .3s all ease-in-out;
}

.card.locked:hover .card-image:after{
  background: #D2580080;
}

.card.locked .card-image img{
  filter: blur(10px) grayscale(50%);
}

.card.locked .card-image .locked-msg{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 80%;
  text-align: center;
  min-width: 200px;
  color: #fff;
  margin: 0 auto;
  z-index: 15;
  transform: translatey(-50%);
}

.card.locked .card-image .locked-msg .message{
  visibility: hidden;
  opacity: 0;
  transition: .3s all ease-in-out;
}

.card.locked .card-image .locked-msg img{
  margin: 0 auto;
  width: 30px;
  filter: blur(0);
  transform: translatey(50%);
  transition: .3s transform ease-in-out;
}

.card.locked:hover .card-image .locked-msg .message{
  visibility: visible;
  opacity: 1;
}

.card.locked:hover .card-image .locked-msg img{
  transform: translatey(0%);
}

.youtube-lazy,
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  position: relative; 
  cursor: pointer; 
  overflow: hidden; 
}

.card.locked .card-image{
  cursor: unset;
}

.youtube-lazy img,
.card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.youtube-lazy .play-button {

	position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 60px;
	    height: 60px;
	    background: url(https://img.icons8.com/ios-filled/50/ffffff/play-button-circled.png) center center / 40px 40px no-repeat rgba(0, 0, 0, 0.6);
	    border-radius: 50%;
	    z-index: 2;
  background-size: contain;
  opacity: 0.8;
}