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*/
}