/* Each film contributes to the same six rows, including its disclosure.
   Wrapped labels or disclosures can no longer move another card's action. */
#main #demos .home-films-grid {
  grid-auto-flow: row;
  row-gap: 0;
}
#main #demos .home-film {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  min-width: 0;
}
#main #demos .home-film-link {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  min-width: 0;
}
#main #demos .home-film-image { align-self: start; }
#main #demos .home-film-meta { align-items: start; }
#main #demos .home-film h3 { align-self: start; text-wrap: balance; }
#main #demos .home-film-link > p { align-self: start; text-wrap: balance; }
#main #demos .home-film-action { margin-top: 0; align-self: stretch; }
#main #demos .home-film-status { margin: 17px 0 0; align-self: start; }

/* Parallel proof cards share their label, heading and copy baselines. */
#main #demos .story-proof-links { row-gap: 0; }
#main #demos .story-proof-links > button {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-items: start;
}
#main #demos .story-proof-links > button > p { text-wrap: balance; }

@media (max-width: 700px) {
  #main #demos .story-proof-links { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  #main #demos .story-proof-links > button { grid-row: auto; grid-template-rows: auto auto auto; }
  #main #demos .story-proof-links > button > p { text-wrap: pretty; }
}

@media (max-width: 1000px) {
  #main #demos .home-films-grid {
    grid-template-columns: minmax(0,1fr);
    max-width: 680px;
    margin-inline: auto;
  }
  #main #demos .home-film:not(:last-child) { margin-bottom: 48px; }
  #main #demos .home-film-image { aspect-ratio: 16/9; }
  #main #demos .home-film-meta { margin-top: 22px; }
  #main #demos .home-film h3 { font-size: clamp(29px, 4vw, 36px); margin-top: 16px; }
  #main #demos .home-film-link > p { margin: 18px 0 24px; text-wrap: pretty; }
  #main #demos .home-film-status { margin-top: 14px; }
}