@media (min-width:821px) {
  [data-clip-viewer-modal].clip-viewer-modal.is-open [data-clip-viewer-track]:has(> .clip-viewer-slide > [data-clip-comments-panel]:not([hidden])) {
    width:min(100vw,1200px);
    margin-inline:auto;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])),
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open {
    grid-template-columns:minmax(80px,180px) minmax(260px,390px) minmax(360px,500px);
    justify-content:center;
    justify-items:stretch;
    gap:12px;
    padding:22px 16px;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-side,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-side {
    grid-column:1;
    grid-row:1;
    justify-self:end;
    min-width:0;
    width:100%;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-frame,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-frame {
    grid-column:2;
    grid-row:1;
    justify-self:stretch;
    min-width:0;
    width:100%;
    max-width:390px;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > [data-clip-comments-panel],
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > [data-clip-comments-panel] {
    position:relative;
    grid-column:3;
    grid-row:1;
    justify-self:stretch;
    align-self:center;
    min-width:0;
    width:100%;
    max-width:500px;
  }
}

@media (min-width:681px) and (max-width:820px) {
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])),
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open {
    grid-template-columns:minmax(260px,390px) minmax(360px,430px);
    justify-content:center;
    justify-items:stretch;
    gap:12px;
    padding:18px 14px 24px;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-side,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-side {
    display:none;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-frame,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-frame {
    grid-column:1;
    grid-row:1;
    justify-self:stretch;
    min-width:0;
    width:100%;
    max-width:390px;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > [data-clip-comments-panel],
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > [data-clip-comments-panel] {
    position:relative;
    grid-column:2;
    grid-row:1;
    justify-self:stretch;
    align-self:center;
    min-width:0;
    width:100%;
    max-width:430px;
  }
}