/* COGO Studio: two questions per row in the preview pane. */
@media screen {
  #main.ps-main .ps-studio .ps-preview {
    container: cogo-studio-preview / inline-size;
  }
  #main.ps-main .ps-studio .ps-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-content: start;
    align-items: start;
    gap: 16px;
    padding: 18px;
  }
  #main.ps-main .ps-studio .ps-list > .ps-question {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  #main.ps-main .ps-studio .ps-list > :not(.ps-question) {
    grid-column: 1 / -1;
    min-width: 0;
  }
  #main.ps-main .ps-studio .ps-list > .ps-more {
    justify-self: center;
    margin: 4px 0;
  }
  #main.ps-main .ps-studio .ps-list > .ps-loading {
    margin: 0;
  }
  @container cogo-studio-preview (min-width: 640px) {
    #main.ps-main .ps-studio .ps-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding: 18px;
    }
    #main.ps-main .ps-studio .ps-question > header {
      padding: 17px 18px 13px;
      gap: 10px;
      flex-wrap: wrap;
    }
    #main.ps-main .ps-studio .ps-question > header > div:first-child {
      flex: 1 1 160px;
      gap: 11px;
    }
    #main.ps-main .ps-studio .ps-question .ps-card-actions {
      margin-left: auto;
      flex: 0 0 auto;
    }
    #main.ps-main .ps-studio .ps-question .ps-question-body {
      padding: 0 18px 18px;
    }
    #main.ps-main .ps-studio .ps-question > footer {
      padding: 10px 18px;
    }
  }
  @container cogo-studio-preview (max-width: 639px) {
    #main.ps-main .ps-studio .ps-list {
      padding: 12px;
      gap: 14px;
    }
  }
}