Use separate files for max-width @media rules

It turns out some browsers don't like nested @media rules, including
the default browsers on Android and iOS. So use separate files for
them instead.

Change-Id: I532a726cb5326937a8a5472b3abb9b9811ba8e7d
Merge "Use separate files for max-width @media rules"