Responsive layout: one threshold for the whole project

There is one threshold for phones and tablets across the whole project. A tablet in landscape is exactly 1024 pixels wide and still touch-driven, so the boundary is inclusive; the second half of the condition catches a phone turned on its side.

@media (max-width: 1024px), (max-height: 500px) { ... }

Do not invent your own threshold: a one-pixel difference once hid the entire menu nesting on a tablet — the submenus were in the markup and never showed, because they opened on hover, and there is no hover on a touch screen.