Hide over laying text on mobile version

Site URL: https://aqua-magenta-dmtw.squarespace.com/config/design/custom-css

Hi, I'me trying to do a couple of modifications to my site, one I want the text over images to disappear when on mobile devices. 
I also want to bring the text box in from the right side?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage figcaption.image-card-wrapper {
    visibility: hidden;
}
}