/* Native page image blocks remain editable and retain their original data.
 * Only consecutive images share a row. Text and isolated images stay full width.
 * Container queries use the document/peek width, not the browser window width.
 */
affine-page-root affine-note > .affine-note-block-container:has(> .affine-block-children-container > affine-image + affine-image) {
  container: affine-image-row / inline-size;
}

affine-page-root affine-note > .affine-note-block-container > .affine-block-children-container:has(> affine-image + affine-image) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  align-items: start;
}

affine-page-root affine-note > .affine-note-block-container > .affine-block-children-container:has(> affine-image + affine-image) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

affine-page-root affine-note > .affine-note-block-container > .affine-block-children-container:has(> affine-image + affine-image) > :is(affine-image:has(+ affine-image), affine-image + affine-image) {
  grid-column: auto / span 1;
}

@container affine-image-row (max-width: 559px) {
  affine-page-root affine-note > .affine-note-block-container > .affine-block-children-container:has(> affine-image + affine-image) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  affine-page-root affine-note > .affine-note-block-container > .affine-block-children-container:has(> affine-image + affine-image) {
    grid-template-columns: minmax(0, 1fr);
  }
}