/* Curated film and live-performance presentation for the Videos page. */
body.page-videos .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.page-videos .video-card {
  width: 100%;
  overflow: hidden;
}

body.page-videos .video-card--wide {
  grid-column: 1 / -1;
}

body.page-videos .video-poster .video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

body.page-videos .video-card .video-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title duration"
    "subtitle duration"
    "details details";
  align-items: center;
  column-gap: 18px;
  padding: 20px 22px 22px;
}

body.page-videos .video-card h2 {
  grid-area: title;
}

body.page-videos .video-card .subtitle {
  grid-area: subtitle;
  min-height: 0;
  margin: 8px 0 0;
}

body.page-videos .video-card .meta {
  grid-area: duration;
  margin: 0;
  white-space: nowrap;
}

body.page-videos .video-details {
  grid-area: details;
  display: grid;
  gap: 5px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(5, 68, 112, .18);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

body.page-videos .video-details p {
  margin: 0;
}

@media (max-width: 850px) {
  body.page-videos .video-grid {
    grid-template-columns: 1fr;
  }

  body.page-videos .video-card--wide {
    grid-column: auto;
  }
}

@media (max-width: 650px) {
  body.page-videos .video-card .video-copy {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "subtitle"
      "duration"
      "details";
    row-gap: 7px;
    padding: 18px;
  }

  body.page-videos .video-card .meta {
    margin-top: 4px;
  }

  body.page-videos .video-details {
    margin-top: 10px;
  }
}