mediaCondition: "min-width" breakpoints not applying the correct style in canvas

Hi,

I'm having some issue with mobile first approach. The canvas render the wrong style when setting different styles at multiple breakpoints. But the code generated is good, this issue only happen in the canvas.

https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524

const breakpoints = [
  { name: "xs", width: "320px" },
  { name: "xsLg", width: "400px" },
  { name: "sm", width: "630px" },
  { name: "md", width: "740px" },
  { name: "lg", width: "1024px" },
  { name: "xl", width: "1280px" },
  { name: "xxl", width: "1800px" }
];

const editor = grapesjs.init({
  container: "#gjs",
  fromElement: 1,
  storageManager: { type: 0 },
  mediaCondition: "min-width",
  deviceManager: { devices: breakpoints },
  plugins: ["gjs-blocks-basic"]
});

1. Are you using the latest release (older versions are NOT supported)? Yes using 0.16.12
2. Are you facing the bug with your local copy of GrapesJS or with the current demo? With my local copy
3. If a local copy
   1. Indicate all informations about your OS, browser and GrapesJS version.
      MacOs, tried on firefox and Chrome and same issue
4. What is the expected behavior? Still should change according to the breakpoint in the canvas when using mediaCondition: "min-width"
5. What happens instead? Style in canvas only apply the change from the 1st breakpoint. but the code in the export view is right. The issue is only in how the canvas render.
6. If you're able to reproduce the bug indicate all the necessary steps
   • Follow this codesandbox https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524
   • Change the device to xs
   • Select the copy box and change the color of this one
   • Change the device to md
   • Select the copy box and change the color of this one to a new color, the color is still the old one from xs
   • Desktop first works fine

Thanks a lot for your help