How do I shrink my images according to adjusted screen size?

Question

I've been struggling with getting my images to resize when switching to mobile etc. everything is fine when in desktop mode, images look fine.

However, when I reduce the page size the image distorts as if it is being pushed from either side, just wondering if there is something I could look at or do to fix this?

I've managed thus far but I keep running into the same issue. Cheers!

import React from "react";
import { slides } from "../constants";
import { useState } from "react";
import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from "react-icons/fa";

const Carousel = () => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length -1 ? 0 : current + 1) 
  }

  const prevSlide = () => {
    setCurrent(current === 0 ? length -1 : current -1)
  }

  if(!Array.isArray(slides) || slides.length <= 0){
    return null;
  }

  return (
    <section className="slider">
      <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide}/>
      <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
      {slides.map((slide, index) => {
        return (
          <div className={index === current ? 'slide active' : 'slide'} key={index}>
            {index === current && ( <img src={slide.image} alt={slide.alt} className="image"/>)}
          </div>
        )     
      })}
    </section>
  );
};

export default Carousel;

I've tried inputting flex adjustments, but I'm not sure I'm putting them in the right place, the index.css file for this section currently looks like as follows:

.slider {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: relative;
  height: 600px;
  border-radius: 10px;
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  font-size: 3rem;
  color: #57DEE4;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: 32px;
  font-size: 3rem;
  color: #57DEE4;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}