Describe the bug

When a CMS page has columns with responsive styles, and also has a CMS block with colums, the responsive styles for the page are no longer treated. This is because the CMS Block has it's own styles which override the media styles for the page.

To reproduce

Steps to reproduce the behavior:

CMS Block setup

1. Create a CMS Block
2. Add columns to CMS block
3. Add basic image to the columns of CMS block

Page Setup

1. Create CMS page
2. Add Row + Columns to page
3. Set the min-height for desktop on the columns
4. Set an image for desktop on the columns
5. Set the min-height for mobile to something different on the columns
6. Set a different image for mobile on columns
7. Add a row to the page
8. Add CMS block into row

Expected behavior

Desktop and mobile styling/images should differ on the page's columns

Actual behavior

Images and min-height stays the same across all media

Possible solutions

PR incoming. Media styles override with the last style tag.

Note: Also requires #4028 otherwise columns don't work

Please let us know what packages this bug is in regards to:

• venia-concept

  venia-ui

  pwa-buildpack

  peregrine

  pwa-devdocs

  upward-js

  upward-spec

  create-pwa

  pagebuilder
  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.