.yt-card{
  position:relative;
  cursor:pointer;
  padding:0;
  border:0;
  background:transparent;
  width:100%;
  display:block;
}
.yt-card img{ display:block; width:100%; height:auto; }

.yt-play-btn{
  position:absolute; inset:0; margin:auto;
  width:76px; height:76px; border-radius:999px;
  background:rgba(0,0,0,.55);
  display:grid; place-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.yt-play-btn::before{
  content:"";
  width:0; height:0;
  border-left:22px solid #fff;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  margin-left:4px;
}

/* make the icon button behave like the old link */
button.preview-link{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:inherit;
}

.yt-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:none; align-items:center; justify-content:center;
  padding:18px; z-index:9999;
}
.yt-modal.open{ display:flex; }

.yt-modal-inner{
  width:min(980px, 100%);
  background:#000; border-radius:16px; overflow:hidden;
  position:relative;
}
.yt-modal-close{
  position:absolute; top:10px; right:14px;
  width:40px; height:40px; border-radius:999px;
  border:0; background:rgba(255,255,255,.14);
  color:#fff; font-size:26px; line-height:40px;
  cursor:pointer; z-index:2;
}
.yt-modal-video{ aspect-ratio: 16/9; }
.yt-modal-video iframe{ width:100%; height:100%; border:0; display:block; }

/* Disable the template hover overlay on selected items */
.portfolio .portfolio-content.no-hover-overlay:hover .portfolio-info {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Also disable the zoom-on-hover effect on selected items */
.portfolio .portfolio-content.no-hover-overlay:hover img {
  transform: none !important;
}