Optimized way to use media queries
The second option would be better, because of aggregation.

For the first option, if you turn on aggregation on your site, the files will be bundled by media query. So, in your case, you would have at least 4 bundles, so 4 requests to fetch your site CSS files. 

For the 3rd option, the browser will request the imported CSS files seperately, so you lose the benfit of aggregation completely.

If you put the media queries inside the CSS files, they will be aggregated together, resulting in only one bundle. This is better for performance, especially for mobile devices.