How to recognize if device is turned horizontally or vertically?

I'm working on a UI in CSS and I'd like to apply different styling when device is turned horizontally or vertically. I know that it probably can be achieved using media queries, but I don't know the specific keyword (if there's some)

I've thought about somehow calculate and use max-width and max-height in the queries, but I didn't come up with a working solution.

In the example I'll use just some basic code:

#menu {
    display: grid;
}

@media only screen and (max-width: 600px) { /* This is just an example to not break the code, I'd like to have there something like: max-width: device-height */ 
      display: flex;
}

I hope it's understandable, I'll be really happy for any help :)

Solution

@media screen and (orientation: portrait) {
-----Horizontal-----------------
}

@media screen and (orientation: landscape) {
-----Vertical-----------------
}

For more information : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation