/* =========================================================================
   Video library
   =========================================================================
   A columnar masonry: the films are shot vertical but not identically so, and
   forcing them into one box would crop every one of them. CSS columns keep
   each tile's own proportion and cost no script.
   ====================================================================== */
.vid-grid {
  column-count: 4;
  column-gap: 20px;
}
.vid-card {
  margin: 0 0 20px;
  break-inside: avoid;
  /* Safari still needs the older spelling to stop splitting a tile. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 1279px) { .vid-grid { column-count: 3; } }
@media (max-width: 1023px) { .vid-grid { column-count: 2; } }
@media (max-width: 767px) {
  .vid-grid { column-count: 2; column-gap: 12px; }
  .vid-card { margin-bottom: 12px; }
  .vid-card__name { font-size: 14px; }
  .vid-card__play { width: 40px; height: 40px; }
  .vid-lightbox { padding: 16px; }
  .vid-lightbox__close { right: 8px; top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vid-card__media img, .vid-card__play { transition: none; }
}