Buongiorno a tutti,

vorrei un aiuto per quanto riguarda uno slide di immagini che non si adatta correttamente alla visualizzazione su dispositivi mobili. Il resto del sito è ok, alcuni slider son fatti con revolution slider e si adattano bene, ma gli slide dei lavori inseriti all'interno del portfolio non si adattano (questi non sono fatti con revolution slider), si vede solo una porzione dell'immagine.

Grazie dell'aiuto

codice HTML:
<article>
                    <figure>
                        <ul class="slides">
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_215606-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_212610-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191010_183102-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/IMG_20191022_151657-1140x500.jpg');"></li>
</ul>
                    </figure>
codice:
.portfolio-single article figure iframe {
  width: 100%;
  height: 500px; 
}
.portfolio-single article figure {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden; 
  position: relative; 
}
.portfolio-single article figure .slides {
  list-style: none;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.portfolio-single article figure .slides li {
  float: left;
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}