Stack banner slideshow list on mobile

Site URL: https://indigo-orb-2eff.squarespace.com/

Hi!

Disclaimer: my coding skills are very novice. However, I am working on a client's home page and was able to figure out how to code a banner slideshow list section to show up as a split screen on desktop and tablet. In mobile, the text appears as an overlay on top of the photo. Could someone help me edit the coding so that the image appears stacked above the content card, text, and slider buttons in mobile? 

Here is the website: https://indigo-orb-2eff.squarespace.com/

Here is the coding: 

@media only screen and (min-width: 640px){
section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .list-slideshow-image{
width:50%!important;
left:0!important;
} 
section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .slide-content {
margin-left: 55%!important;
width:45%!important;
}
section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow .slide { 
  background: #e5e5e5!important;
}
section[data-section-id="62ad4f02e9d8d9784d892462"] .user-items-list-banner-slideshow {
margin-left: 120px;
margin-right: 120px;
}
section[data-section-id="62ad4f02e9d8d9784d892462"] .slides{
padding-right:0!important; 
 }
}
@media only screen and (max-width: 640px){ 
section[data-section-id="62ad4f02e9d8d9784d892462"] h2,
section[data-section-id="62ad4f02e9d8d9784d892462"] p { color: #ffffff!important;
 }  
}

Hi. What is access password?

@tuanphan oops sorry -- the access password is tnblitz12

Use this CSS

/* Stacked List Slideshow mobile */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62ad4f02e9d8d9784d892462"] {
.slide-media-container {
    height: 39% !important;
}

.slide-content.list-item-card-background {
    height: 50%;
    margin-top: 0px !important;
    background-color: rgba(0,0,0,0.75);
    padding: 10px !important;
    margin-top: 70% !important;
}
li.slide.list-item {
    padding: 0 !important;
}}
}