/* Wider labels and a little more space around the tools in the expanded result. */
@media (min-width: 991px) {
  .studio-shell:is(.studio-image, .studio-video) .jc-main > .zv-viewer {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 420px);
  }
  .studio-shell:is(.studio-image, .studio-video) .zv-viewer > .zv-panel {
    padding-inline-start: clamp(18px, 1.4vw, 27px);
    padding-inline-end: clamp(20px, 1.6vw, 30px);
    padding-block-end: max(24px, env(safe-area-inset-bottom));
  }
  .zv-viewer .zv-panel > .zv-capabilities h2 { margin-block-end: 8px; }
  .zv-viewer .zv-panel .zv-capabilities .zr-tools,
  .zv-viewer .zv-panel > .zv-footer {
    row-gap: 4px;
    padding: 7px;
  }
  .zv-viewer .zv-panel .zv-capabilities .zr-tools .zr-icon,
  .zv-viewer .zv-panel > .zv-footer .zr-button {
    min-height: max(42px, var(--zw-row-height, 34px));
    padding-inline: 10px;
  }
  .zv-viewer .zv-panel > .zv-footer { margin-block-start: 10px; }
}

.studio-shell.jc-studio:is(.studio-image, .studio-video) .cg-group > .jc-record-header {
  row-gap: 4px;
  margin-block-end: 8px;
}

.studio-shell.jc-studio:is(.studio-image, .studio-video) .cg-group > .jc-record-header > p {
  line-height: max(26px, 1.8em);
}