I’m in the final stages of developing my custom WordPress theme, and I’m stuck on a CSS layout issue involving a Fotorama gallery and an adjacent text block. Here’s the scenario:

Layout Requirements:
Above 800px Width:

Horizontal layout: The Fotorama gallery should take up 2/3 of the width, and the text block should take up 1/3.
Max height for Fotorama: I want to set a max height of 75vh for the Fotorama gallery, ensuring that the thumbnails are always visible when the page is loaded.
Center alignment: Both the Fotorama and the text block should be centered horizontally within the parent container.

Below 800px Width:

Vertical layout: The Fotorama gallery and the text block should stack vertically without overlapping.

I’ve managed to get the basic layout working, but I’m having issues that either the thumbnails get cut off at the bottom or I can not get fotorama to fill the whole width.
I also had tried a solution where all of a sudden the fotorama gallery just stuck out of the left side of the window, skewing everything else (but only when resizing from a wide to a thin window, not the other way around).

Here is the page in question (there are more projects, but this one shall suffice):
https://temp.fokuspunkt.de/sonocool-und-sonorex-cover-shots/

I’d be really happy if someone could help. Feel free to tell me if I need to clarify anything! Seriously, I have been working on this for so long I am embarrassed to admit it… I need to get this done and take a break and start another project. Thank you very much, I appreciate you taking your time to read this!