/* Five video cards must not stretch or overflow the player column. */
@media (min-width: 1101px) {
  .records-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .55fr); align-items: start; }
  .records-grid > .record-screen { width: 100%; min-width: 0; height: auto; align-self: start; aspect-ratio: 16 / 9; overflow: hidden; }
  .records-grid > .record-screen .record-video { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; }
  .records-grid > .record-list { min-width: 0; grid-template-rows: none; grid-auto-rows: minmax(104px, auto); align-self: start; }
  .record-list > button { min-width: 0; min-height: 104px; grid-template-columns: minmax(0, 44%) minmax(0, 56%); overflow: hidden; }
  .record-list > button > img { min-width: 0; max-width: 100%; }
  .record-list > button > div { min-width: 0; overflow-wrap: anywhere; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .records-grid { grid-template-columns: minmax(0, 1fr); }
  .records-grid > .record-screen { min-width: 0; width: 100%; aspect-ratio: 16 / 9; height: auto; align-self: start; }
  .records-grid > .record-list { display: flex !important; min-width: 0; width: 100%; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .record-list > button { display: grid; flex: 0 0 300px; grid-template-columns: 110px minmax(0, 1fr); min-width: 0; min-height: 104px; scroll-snap-align: start; }
  .record-list > button > img { width: 110px !important; height: 104px !important; object-fit: cover; }
  .record-list > button > div { display: grid; min-width: 0; padding: 12px; }
}