/* bloque de texto en 2 columnas creado con el formato "columnas" (js/quill-columnas.js) */
.ql-editor .ql-columnas-bloque {
  column-count: 2;
  column-gap: 2em;
}

/* formato "grid" (js/quill-columnas.js): los elementos con ql-grid-2 se ponen de dos en dos (1fr 1fr), el resto ocupa la fila entera */
.ql-editor:has(> .ql-grid-2, > * > .ql-grid-2) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2em;
  align-items: center; /* los dos elementos de una fila quedan centrados verticalmente entre sí */
  align-content: start; /* sin esto las filas se estiran hasta llenar el min-height del editor y quedan separadas */
}

.ql-editor > * {
  grid-column: 1 / -1;
}

.ql-editor > .ql-grid-2,
.ql-editor > :has(> .ql-grid-2) { /* listas y bloques de columnas con alguna línea marcada */
  grid-column: auto;
}

.ql-editor .ql-grid-2 img {
  max-width: 100%;
}

@media (max-width: 600px) {
  .ql-editor .ql-columnas-bloque {
    column-count: 1;
  }

  /* en pantallas pequeñas el grid es de una columna: los elementos marcados quedan uno debajo de otro */
  .ql-editor:has(> .ql-grid-2, > * > .ql-grid-2) {
    grid-template-columns: minmax(0, 1fr);
  }
}