Making A Responsive Image Slideshow

I've been playing around with an image slideshow on my website. It works well when I test it on the PC version of the site, but it doesn't scale down properly on a mobile site, the ratio of each image is off.

HTML:

<div class="slider">
  <div class="slides">
    <input type="radio" name="radio-button" id="radio-button1">
    <input type="radio" name="radio-button" id="radio-button2">
    <input type="radio" name="radio-button" id="radio-button3">
    <input type="radio" name="radio-button" id="radio-button4">
    <input type="radio" name="radio-button" id="radio-button5">
    <div class="slide one">
      <img src="IMG_3725.jpg">
    </div>
    <div class="slide">
      <img src="IMG_3953.jpg">
    </div>
    <div class="slide">
      <img src="IMG_8098.jpg">
    </div>
    <div class="slide-automatic">
      <div class="auto-button1"></div>
      <div class="auto-button2"></div>
      <div class="auto-button3"></div>
      <div class="auto-button4"></div>
      <div class="auto-button5"></div>
    </div>
  </div>
  <div class="slide-manual">
    <label for="radio-button1" class="manual-button"></label>
    <label for="radio-button2" class="manual-button"></label>
    <label for="radio-button3" class="manual-button"></label>
    <label for="radio-button4" class="manual-button"></label>
    <label for="radio-button5" class="manual-button"></label>
  </div>
</div>

CSS:

.slider {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 100%;
  height: 100%;
}

.slide-manual {
  position: absolute;
  width: 100%;
  margin-top: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-button {
  border: 2px solid #FFFFFF;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  margin: 15px;
}

.manual-button:hover {
  background: #FFFFFF;
}

#radio-button1:checked~.one {
  margin-left: 0;
}

#radio-button2:checked~.one {
  margin-left: -20%;
}

#radio-button3:checked~.one {
  margin-left: -40%;
}

#radio-button4:checked~.one {
  margin-left: -60%;
}

#radio-button5:checked~.one {
  margin-left: -80%;
}

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

.slide-automatic div {
  border: 2px solid #FFFFFF;
  padding: 5px;
  border-radius: 10px;
  transition: 1S;
  margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1 ,
#radio-button2:checked~.slide-automatic .auto-button2 ,
#radio-button3:checked~.slide-automatic .auto-button3 ,
#radio-button4:checked~.slide-automatic .auto-button4 ,
#radio-button5:checked~.slide-automatic .auto-button5 {
  background: #FFFFFF;
}

Javascript:

var counter = 1;
setInterval(function(){
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if(counter > 4) {
    counter = 1;
  }
}, 5000);

I tried adding a CSS Media Query to this code to get the ratio of each image to stay the same when the screen scales down, but I didn't have any luck.

I also tried changing the .slide img code and was able to keep the ratio of the image in the slideshow. However, after the slideshow stopped moving from one image to the next, it was as if it froze.

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
}

Any ideas on how to make this slideshow responsive would be much appreciated.

I can see that you have set the height of slide class to 500px and image under slide class to 100% , that's why the ratio is not matching as the image height always remain 500px.

.slides {
  width: 500%;
  /*removed height */
  display: flex;
}

Now it will work