/* Selected layout: show the demo immediately after its heading on smaller screens. */
.ws-case-layout {
  grid-template-areas: "title media" "body media";
  grid-template-rows: auto 1fr;
  row-gap: 30px;
}
.ws-case-layout > .ws-project { grid-area: title; margin: 0; }
.ws-case-layout > .ws-project-media { grid-area: media; }
.ws-case-layout > .ws-detail { grid-area: body; }
@media (max-width: 800px) {
  /* Match desktop's whole-project hold; playback.js accounts for tall rows. */
  .ws-project-stage { min-height: calc(100dvh - 32px); }
  .ws-project-stage::after { content: ''; display: block; height: clamp(120px, 22vh, 220px); }
  .ws-case-layout {
    position: sticky;
    top: var(--project-pin-top, 32px);
    grid-template-areas: "title" "media" "body";
    grid-template-rows: auto;
    row-gap: 24px;
  }
}

/* Show each original recording in full, without a background or letterboxing. */
.ws-project-video {
  aspect-ratio: auto;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(32 36 29 / 14%);
}