Hero image on mobile changes

Question

I'm trying to add two new things to my hero images on the front page of https://webhost.pro/ and the hero on content pages https://webhost.pro/company/about-us/

First. On the front page Hero, I was hoping to have the mobile version slide by hand. As of now when you slide it by hand it just changes the page. It doesn't have any sliding effects. Maybe a wow effect? It's weird, you slide it and it just changes the page after you do the finger slide. When it would look much better to actually slide with your finger.

Second. On the content page Hero. I would like to have the image changes for mobile or just be a color background. As of now the same image shows on mobile as desktop and it looks funny with just some hair showing and it's a big image for phone in my opinion.

Hero full image

#frontpage hero .image-slider {
  background-image: url("/bg2.jpg");
  padding-top: 115px;
  padding-bottom: 0px;
  height: 600px
}

.image-slider .carousel-indicators {
  top: 450px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  float: center
}

.image-slider .sliderimage-bottom {
  margin-top: 25px
}

.image-slider i.fas,
.image-slider i.far,
.image-slider i.fal,
.image-slider i.fab {
  color: #3c87a2
}

.image-slider .carousel-indicators .active {
  background-color: #615c68
}

.image-slider .main-container {
  padding: 0
}

.image-slider .slide1 h3,
.image-slider .slide2 h3,
.image-slider .slide3 h3,
.image-slider .slide4 h3 {
  color: #615c68;
  font-size: 36px;
  font-weight: 500;
  margin-top: 35px;
  margin-bottom: 10px
}

.image-slider .slide1 h4,
.image-slider .slide2 h4,
.image-slider .slide3 h4,
.image-slider .slide4 h4 {
  color: #c3c3c3;
  font-size: 17px;
  font-weight: 400;
  margin-top: 25px;
  margin-bottom: 25px
}

.image-slider .carousel-control.right,
.image-slider .carousel-control.left {
  background-image: none
}

.image-slider .carousel .item {
  min-height: 360px;
  height: 100%;
  width: 100%
}

.image-slider .carousel-inner .item .container {
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0
}

.image-slider h4 {
  animation-delay: 0.5s
}

.image-slider h4.second {
  animation-delay: 1s
}

.image-slider a {
  animation-delay: 1.5s;
  margin-top: 5px
}

.image-slider img {
  animation-delay: 0.5s
}

.image-slider img.slide01 {
  float: right;
  margin-top: 10px
}

.image-slider img.slide02 {
  float: right;
  margin-top: 35px
}

.image-slider img.slide03 {
  float: right
}

#contentpage hero .herogirl {
  position: relative;
  width: 100vw;
  height: 70vh;
  display: flex;
  justify-content: left;
  align-items: center
}

.herogirl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://webhost.pro/templates/CloudSave-child/assets/img/hero-header-lady.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: brightness(100%);
  border-radius: 5px
}

.herogirl-content {
  position: relative;
  color: #585453;
  text-align: left;
  margin: 3.5rem
}

.herogirl-title {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 0
}

.herogirl-subtitle {
  font-size: 2.5rem;
  font-weight: 500;
  margin-top: 0
}

Thanks!