Sections overlapping on mobile

Site URL: https://parakeet-ruby-46jt.squarespace.com/

Hi there 👋

I'm quite new to custom CSS but I've managed to pull together enough to get the display I want on desktop but it's stuffing up when it switches to mobile.

Section 1 is an autoplay slideshow.

Section 2 is the overlapping text for the slideshow.

Section 3 is three posters with button links

So on desktop, it looks like this (which is what I want):

But on mobile, I want the slideshow with overlapping text to be on top of the three posters. Basically like this but without the sections overlapping:

The problem I'm facing on mobile:

The first poster overlaps the slideshow.

The third poster overlaps the footer. 

CSS used:

1. <style>#page .page-section{height:100vh}
2. #page .page-section:nth-child(2) {margin-top:-100vh;}
3. #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
4. @media only screen and (min-width: 641px){
5. #page .page-section{width: 70%; height: 110vh; align-items: center; float: left}
6. #page .page-section:nth-child(3) {margin-top:-100vh;}
7. #page .page-section:nth-child(3) {width: 30%; height: 100vh; align-items: center}
8. #page .page-section:nth-child(3) , #page .page-section:nth-child(3) .section-background{background-color:transparent!important}
9. </style>

Hopefully this makes sense. Any advice would be great. 

Thanks!

Happy to take a look but the site is password protected

Please set up a site-wide password. Post the password here.

We can then take a look at your issue.

Whoops sorry - password is password