Media Queries with Page Builder

Hi,

I’ve added a Row with a Row Layout of 2 columns set to the Golden Ratio. I’ve placed a Text widget in each of these two columns in this new Row.

Can I use the Widget Styles > Attributes fields (i.e., the Widget Class and CSS Styles fields) to set up media queries at specific breakpoints. For example, at a specific screen width range I’d like to have the left column be 61.8% and the right column be 38.2%, and at a second specific screen width range I’d like to have the left column switch to 55.8% and the right column switch to 44.2%, as shown in the media queries below:

@media (min-width: 1000px) and (max-width: 1250px) { #panel-44-0-0-0 .panel-widget-style {width:61.8%;}}
@media (min-width: 1000px) and (max-width: 1250px) { #panel-44-0-1-0 .panel-widget-style {width:38.2%;}}

@media (min-width: 960px) and (max-width: 999px) { #panel-44-0-0-0 .panel-widget-style {width:55.8%;}}
@media (min-width: 960px) and (max-width: 999px) { #panel-44-0-1-0 .panel-widget-style {width:44.2%;}}

Thanks in advance for your help.

Alex