css de yaşadığım slide problemi

<style type="text/css">/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
 
 
/*Basic structure of slider*/
.con1{
    width: 500px;
    top: 50%;
    left: 50%;
    overflow: hidden;
    border-radius: 8px;
}
 
/*Area of images*/
.wrap1{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}
 
img{
    width: 100%;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    12%{
        transform: translateX(0);
    }
    13%{
        transform: translateX(-100%);
    }
    24%{
        transform: translateX(-100%);
    }
    25%{
        transform: translateX(-200%);
    }
    27%{
        transform: translateX(-200%);
    }
    48%{
        transform: translateX(-300%);
    }
    50%{
        transform: translateX(-300%);
    }
    62%{
        transform: translateX(-400%);
    }
    65%{
        transform: translateX(-400%);
    }
    74%{
        transform: translateX(-500%);
    }
    76%{
        transform: translateX(-500%);
    }
    85%{
        transform: translateX(-600%);
    }
    87%{
        transform: translateX(-600%);
    }
    94%{
        transform: translateX(-700%);
    }
    100%{
        transform: translateX(-700%);
    }
}</style>
<style type="text/css">.ornekclass{
display: none;
}
@media screen and (max-width:900px){
.ornekclass{
display: block;
}
}</style>
  <script type="text/javascript">var slideIndex = 0;
carousel();
 
function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds
}</script>
 
<style type="text/css">.class {
display: none;
}
@media screen and (max-width:900px){
.yem{
display: block;
}
}</style>
<style type="text/css">@media only screen and (min-width: 768px) {
.yeni{
    display: block;
}
}</style>