Custom breakpoints based on aspect ratio?

Hi, I’m using OceanWP and editing via Elementor.

I want my blog to have a “booklet” style layout with the screen divided in two (square-ish) symmetrical halves.

In such a layout, it makes sense for the second half to be underneath the first half (rather than to the right of it) as soon as the viewport has a vertical aspect ratio, regardless of the width in pixels. For instance, a vertically oriented ipad should show the screen split into two stacked blocks, but a horizontally oriented phone should show the screen split into two blocks side by side.

Right now, Elementor offers custom breakpoints only based on width in pixels, which is useless for me. I know that there are CSS lines that base the media query on the aspect ratio rather than the width in pixels (aspect-ratio, min-aspect-ratio and max-aspect-ratio). What I don’t know is how to apply them properly to my page which I built in Elementor (I really know very little about coding).

In the style.css file, I see lots of media queries, but I don’t know which one(s) I should modify. Is there a sort of “master media query” that affects all others, or should I change them one by one? The media queries that change font size etc based on pixel width work just fine for me, it’s just the orientation of the two blocks of my split screen layout that needs to respond to the aspect ratio.

Thanks in advance for any help or advice you can give me!

The page I need help with: [log in to see the link]