How to add custom CSS per media query in Omega 3 theme? My Omega 3 theme has the following layouts in the grid settings: 

Narrow layout: all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)    

Normal layout: all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)

Wide Layout: all and (min-width: 1220px)

I need to add some custom CSS within each media query. At the moment ive added them within my existing custom CSS file by copying the media query and adding an @import. 

@media all and (max-width: 739px) {
    //styles
}

@media all and (min-width: 740px) and (min-device-width: 740px), 
(max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
    //styles
}

@media all and (min-width: 980px) and (min-device-width: 980px), 
all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
    //styles
}

@media all and (min-width: 1220px) {
    //styles
}


Is there a better practice way of doing this / what are the other ways? Is there a way that integrates with the theme more fully?
Part of the magic of Omega3 is that it does that for you!

Omega will always load the global.css file. If you are in a mobile layout (too narrow for a grid), that is the only file that loads. When you increase the browsers width to narrow, then omega 3 dynamically loads:


global.css
SUBTHEME-alpha-default.css (loads for all non-mobile-layouts)
SUBTHEME-alpha-default-narrow.css


If you keep increasing your browsers width to the normal layout, then these css files are loaded:


global.css
SUBTHEME-alpha-default.css
SUBTHEME-alpha-default-narrow.css
SUBTHEME-alpha-default-normal.css


Note that any CSS definitions you have in SUBTHEME-alpha-default-normal.css will override definitions in global.css, SUBTHEME-alpha-default.css, and SUBTHEME-alpha-default-narrow.css

To answer your question then, custom CSS for the narrow layout should go in SUBTHEME-alpha-default-narrow.css, custom CSS for the normal layout goes in SUBTHEME-alpha-default-normal.css, and custom CSS for the wide layout goes in SUBTHEME-alpha-default-wide.css. Just put it in and let Omega3 do the rest!

See https://groups.drupal.org/node/156719 for more info