Auto slideshow with text and button reposition for mobile

Hello,

I'm having a issue for my auto slideshow reel for mobile version. It works fine on website with text and button, but when it turns to mobile, images are too big and goes overlay with text and button. I wish it goes like the reference photo, smaller image size, text and button on the bottom with background block. How can I fix this? FYI, here's the code that I used to make auto slideshow banner 

<script>
  (function(){
    let playInBackend = true,
        timing = 6,
        section = '',
        direction = 1;

function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})});
  }());
</script>

https://www.nine.education/ Link for the website

Add this code to Website Tools (under Not Linked) > Custom CSS

/* List Slideshow - Stacked on Mobile */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="654fd0b1340d6e12c50b12d6"] {
li.slide.list-item>div {
    position: static !important;
}
li.slide.list-item {
    flex-direction: column;
    padding: 0 !important;
}}}

Thanks for the solution! I implemented the code you provided, and now it works better than before but it still got problems like the screenshoot I attached below.
This is out of my first question, how can I make this header slide like this reference New Balance homepage banner? It shows only right halt of the image in its mobile version. This way, I think my website won't show unnecessary empty space on mobile version.

Thank you advance!
 

You want to remove these spaces?

Yes, that's what I meant. Thanks for understanding!

5 hours ago, Biju said:

Yes, that's what I meant. Thanks for understanding!

Can you disable autoplay? I can test code easier

Of course. I just stopped autoplay and now it only works manually.