<style>
  .item-slider.object-fit {
    height: 220px;
  }
  @media screen and (min-width: 768px) {
    .item-slider.object-fit {
      height: 250px;
    }
  }
  @media screen and (min-width: 992px) {
    .item-slider.object-fit {
      height: 350px;
    }
  }
  @media screen and (min-width: 1200px) {
    .item-slider.object-fit {
      height: 420px;
    }
  }
  @media screen and (min-width: 1440px) {
    .item-slider.object-fit {
      height: 626px;
    }
  }
</style>
<div class="item-slider object-fit">
  <div class="img-slide"><span class="img-native-wrap" style="padding-bottom: 22.396%;"><img class="img-fluid" src="{{media url='wysiwyg/slider/bn4.jpg'}}" alt="" width="1920" height="626" loading="lazy"></span></div>
  <div class="container">
    <div class="block-content">
      <div class="block-center">
        <h1 class="text-large center animated fadeInDownSlide delay-0s5"><strong><span font="open sans" style="color: #000;"><span>DANAS 40%</span></span><span><br><span style="color: #ffaa39;">SUTRA 39%</span></span></strong></h1>
        <div class="text-normal animated fadeInDownSlide delay-1s"></div>
        <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Poruči sada</span></a></div>
      </div>
    </div>
  </div>
</div>
<div class="item-slider object-fit">
  <div class="img-slide"><span class="img-native-wrap" style="padding-bottom: 22.396%;"><img class="img-fluid" src="{{media url='wysiwyg/slider/bn6.jpg'}}" alt="" width="1920" height="626" loading="lazy"></span></div>
  <div class="container">
    <div class="block-content">
      <div class="block-center">
        <p class="text-small animated fadeInDownSlide" style="color: #0099cc;">Ograničena serija</p>
        <h2 class="text-large animated fadeInDownSlide delay-0s5" style="color: #000000;"><strong><span style="color: #000;">SKANDINAVSKA KOLEKCIJA</span><br><span style="color: #ffaa39;">ZA TVOJU SPAVAĆU SOBU</span></strong></h2>
        <div class="text-normal animated fadeInDownSlide delay-1s" style="color: #000000;">
          <div>ZA SAMO</div>
          <p>RSD9.999,00</p>
        </div>
        <div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="action primary" href="#">PORUČI SADA</a></div>
      </div>
    </div>
  </div>
</div>
<div class="item-slider object-fit">
  <div class="img-slide"><span class="img-native-wrap" style="padding-bottom: 32.6%;"><img class="img-fluid" src="{{media url='wysiwyg/slider/Baner01.jpg'}}" alt="" width="1920" height="626" loading="lazy"></span></div>
</div>

it doesn’t display well on laptop screens, getting cut off on the sides. It’s not fully responsive. I want the image to stay entirely on the screen from the start. Also, I want the image to change when it switches to the mobile version.