css Reordering sections on mobile only

I have used CSS found in previous threads on how to reorder sections on mobile only – specifically reversing the order of the first and second sections on all pages of the below website.

I am having two issues:

1. On mobile when the sections are reversed there is a large gap below the images (first section) and before the text (second section)

2. On the Masterclasses page the third section is displaying further down the page when the CSS is used

Can someone please help to rectify the two issues and let me know if there is a more simple way of me reversing the section order on mobile for each of the pages within the site?

Thanks in advance.

https://coral-tangerine-xdb2.squarespace.com/

Password: ambmb2015

#1. #2. Add this CSS code

/* Mobile space */
@media screen and (max-width:767px) {
[data-section-id="65766bfe160ccb66045d7b97"], [data-section-id="65714803a93fb05d5d91d49b"] {
    padding-top: 0px !important;
}
}