.card {
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card:hover, .card:focus-visible {
  transform: translateY(-7px) scale(1.025);
  box-shadow: 0 22px 50px #000;
  border-color: #ffffff33;
  outline: none;
}
.cardMedia { display:block; position:relative; overflow:hidden; }
.cardMedia img { transition:transform .65s ease, filter .35s; }
.card:hover .cardMedia img, .card:focus-visible .cardMedia img { transform:scale(1.07); filter:brightness(.58); }
.cardPlay {
  position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px;
  border-radius:50%; background:#fff; color:#090909; display:grid; place-items:center;
  padding-left:4px; font-size:19px; opacity:0; transform:scale(.7); transition:.3s;
}
.cardHint {
  position:absolute; left:14px; bottom:12px; font-size:9px; font-weight:900;
  letter-spacing:1.6px; opacity:0; transform:translateY(8px); transition:.3s;
}
.card:hover .cardPlay, .card:focus-visible .cardPlay,
.card:hover .cardHint, .card:focus-visible .cardHint { opacity:1; transform:scale(1) translateY(0); }
@media (max-width:700px) {
  .cardPlay { width:42px; height:42px; margin:-21px; opacity:.92; font-size:15px; }
  .cardHint { display:none; }
  .card:active { transform:scale(.98); }
}