Не работает адаптив swiper-слайдера в теге picture

Не работает адаптив swiper-слайдера в теге picture. При изменении ширины экрана изображение с десктопной версии не исчезает, а показывается позади изображения для текущего разрешения. HTML

<div class="swiper-slide">
  <picture>
     <source srcset="/img/balconies-320px.jpg" media="(max-width: 500px)">
     <source srcset="/img/balconies-768px.jpg" media="(max-width: 992px)">
     <source srcset="/img/balconies-1024px.jpg" media="(max-width: 1300px)">
     <img class="swiper-img" srcset="/img/balconies-1920px.jpg" alt="Фасад">
  </picture>
</div>

CSS

.swiper-slide {
    background-size: cover;
}

.swiper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
img {
    max-width: 100%;
}

Выглядит примерно так