.media-card {
  color: inherit;
  cursor: pointer;
  display: block;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.media-card:hover,
.media-card:focus-visible {
  border-color: rgba(242,184,75,.72);
  box-shadow: 0 16px 42px rgba(0,0,0,.24);
  outline: none;
  transform: translateY(-2px);
}

.library-card-target {
  border-color: rgba(242,184,75,.9);
  box-shadow: 0 0 0 3px rgba(242,184,75,.2),0 18px 55px rgba(0,0,0,.28);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .media-card { transition: none; }
}