I have a simple Slider from the react-slick library. It works great at bigger screen sizes but when it comes to smaller screen sizes my images will overflow onto the other image as shown below:

This is what it looks like on bigger screens (no images overflowing onto each other, only 1 image present):

Having a hard time figuring out how to fix this problem. Here is my code:

export default function Home() {
var settings2 = {
dots: false,
infinite: true,
autoplay: false,
speed: 1500,
pauseOnHover: false,
autoplaySpeed: 4000,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
centerMode: true
};
<Slider {...settings2}>
    <div>
      <Image src="myimg.png" width={0} height={0} sizes="100vh" className={styles.imageContainer} style={{paddingBottom: '2vh'}} />
    </div>
    <div>
      <Image src="otherimg.png" width={0} height={0} sizes="100vh" className={styles.imageContainer} />
    </div>
  </Slider>
  }

css classes:

.imageContainer {
 width: auto;
 height: 70vh;
 margin: 0 auto;
}