Responsive row height css

So I’m a complete beginner at all this and I developed my site following the tesseract theme tutorials.

Here is my site; www.amaphor.co.uk

In the page builder I have three rows with the middle one being the main content. The rows above and below the main content need to be able to change in height depending on the screen size ( When on iPhone the height above the main content should be about 20px but on desktop it should be 350px and same with the row below.)

I’ve approached this problem by giving the top row a class title (spacertop) and adding this in to the css;

@media screen
and (min-device-width : 375px) { class=”.spacertop” height: 20px }
and (max-device-width : 667px) { class=”.spacertop” height: 350px }

I’m hoping someone can help me around this?