Mobile first media queries (portrait / landscape)

Use min-aspect-ratio: 1 / 1 in your media query to define the landscape orientation cross platform.

Set your breakpoints as below so styles are picked up across devices accordingly to the device width on portrait as well as landscape orientation.

“aspect-ratio” describes the aspect ratio of the output device. The value consists of two positive integers separated by a slash (“/”) character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
(min-aspect-ratio: 1 / 1) selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

@media
/* portrait */ only screen and (min-device-width: xxem) and (min-width: xxem),
/* landscape */ only screen and (min-device-width: xxem) and (min-width: xxem) and (min-aspect-ratio: 1 / 1) {
/* your styles here*/
}