Как я могу заставить другое изображение слайда появляться?

Question

Краткое описание:

Я пытаюсь сделать это только для телефонного медиа-запроса, который у меня сейчас есть. Другие изображения слайдов не будут отображаться. Пожалуйста, помогите!

---

Что я могу сделать, чтобы другие изображения слайдов появились?

Разработка: Они были в нижней части slideimg1 (единственное изображение, которое показывает), и я думаю, именно поэтому изображения не скользят горизонтально, потому что они были сложены. Я попытался использовать display flex, но он тоже не работает, я применил его к слайдерам sliderchild и mobile_container. Я вообще не знаю, как это можно исправить.

    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&display=swap");
    
    :root {
      --button-color: #b6b6b6;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      height: 100%;
    }
    
    body {
      background-color: #e2e2e2;
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
    }
    
    .container {
      white-space: nowrap;
      max-height: 100%;
    }
    
    a,
    a:visited,
    a:focus,
    a:active {
      text-decoration: none;
    }
    
    /**/
    /*PHONE STYLES*/
    /**/
    @media screen and (min-width: 350px) {
      html {
        font-size: 10px;
      }
    
      div {
        font-size: 2.5rem;
      }
    
      /* MAIN */
      .mobile_container {
        max-width: 350px;
        width: 80%;
        margin: 0 auto;
      }
    
      /* SLIDER*/
      #slider {
        height: 52vh;
        overflow: hidden;
        
      }
    
      .slider_child {
        height: 600px;
        width: 100%;
          
      }
    
     .image_con {
        width: 90%;
        height: 500px;
    
        animation-name: slider;
        animation-duration: 8s;
        animation-direction: normal;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
      }
      .image_con:nth-child(1) {
        background-image: url("https://i.imgur.com/xvYImiF.png");
        background-repeat: no-repeat;
      }
    
      .image_con:nth-child(2) {
        background-image: url("https://i.imgur.com/hYnjyMy.png");
        background-repeat: no-repeat;
        background-size: cover;
      }
    
      .image_con:nth-child(3) {
        background-image: url("https://i.imgur.com/kGZ5oCv.png​");
        background-repeat: no-repeat;
        background-size: cover;
      }
      
      @keyframes slider {
        0% {
          background-position: 0 0;
        }
    
        16.66% {
          background-position: 0 0;
        }
    
        33.32% {
          background-position: -800px 0;
        }
    
        49.98% {
          background-position: -800px 0;
        }
    
        66.64% {
          background-position: -1600px 0;
        }
    
        83.30% {
          background-position: -1600px 0;
        }
    
        100% {
          background-position: 0 0;
        }
      }
    
      .title_holder {
        height: 10vh;
        margin-top: 20%;
        position: relative;
      }
    
      .title {
        font-weight: 500;
        letter-spacing: 8px;
      }
    
      .button {
        border: 2px solid var(--button-color);
        font-size: 0.7rem;
        font-weight: 500;
        padding: 1px;
        height: 2.5vh;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1em;
      }
    }

    <!--    MAIN   -->
    <div class="mobile_container">
      <!--SLIDER-->
      <div id="slider">
        <div class="slider_child">
          <div class="image_con"></div>
          <div class="image_con"></div>
          <div class="image_con"></div>
        </div>
      </div>
    </div>
    <div class="title_holder">
    
      <div class="title lineheight">
        IR
      </div>
      <div class="title lineheight">
        REG
      </div>
      <div class="title">
        ULAR
      </div>
    
      <div class="button">
        <a class="learn_more">LEARN MORE</a>
      </div>
    </div>