Estilo predeterminado para bloques personalizados

Hola, estoy usando GrapesJS para un creador de páginas dentro de una web de Prestashop. La idea es establecer la plantilla predeterminada almacenada en la base de datos con bloques personalizados. Todo funciona bien con la tienda y la carga de la plantilla. Mi problema es que quiero usar solo bloques personalizados que he creado y añadido al BlockManager, pero con CSS por defecto. Puedo poner CSS, pero ¿cómo configuro consultas multimedia para esos bloques por defecto? Los usuarios del creador de páginas solo tendrán que arrastrar los bloques y esos deberían ser responsivos por defecto. Este es mi código:

'''js editor. BlockManager.add('block-header', { etiqueta: 'Bloc Header', Contenido: '<style> .mdc_block_header { ancho:100%; pantalla:flex; justificar-contenido:centro; alinear-ítems:centro; Altura: 400px; imagen de fondo: URL ('http://placehold.it/350x250/78c5d6/fff/image1.jpg'); Tamaño de fondo: Portada; } .mdc_block_header espacio { tamaño de fuente:22px; } </style> '<div class="mdc_block_header"><span>Test</span></div>', atributos: { título: 'Insertar header_block' } });

El problema es que tengo que usar el <style></style> para acceder a las consultas de medios, pero cuando arrastro dos veces los bloques y cambio la imagen de fondo en el editor, cambia para los dos bloques y no solo para el que quería...