Why is media query grid not working on the grid but on the text

Question

I wanted to make this one vertical when the screen size is less than 400px but I couldn't, but I was able to make the text smaller, however, when the screen is less than 400px. So the overall thing is that when a media query activates only the text activates according to the media query code.

#section-prod {
  display:grid;
  margin-top: 20px;
  justify-items: center ;
  grid-template-columns: repeat(3 , 1fr);
  background-color: #ff812c;
  /* grid-auto-rows: minmax(270px , auto); */
  overflow: hidden;
  text-align: center;

  
}

div.boxes-prod {
  font-family: 'PT Sans', sans-serif;
  margin-top: 10%;
  color:#8400ff;
  font-size:1.5em;
  padding: 20px;
}

#heading-sect-prod {
  font-family: 'PT Sans', sans-serif;
  text-align: center;
}

.prod-sec {
  color: #8400ff;
  border: solid 2px #8400ff;
  padding: 2px;
  background: #ff812c;
  font-family: 'poppins';
  font-size: 90%;
  margin: 10px;
  text-decoration: none;
  
}



@media only screen and (max-width:400px) {

  #section-prod {
    grid-auto-flow:column;
    grid-template-columns: repeat(1,1fr);

  }

  
  div.boxes-prod {
  margin-top: 10%;
  grid-auto-flow:row;
  
  }


  #heading-sect-prod {
    font-family: 'PT Sans', sans-serif;
    text-align: center;
    font-size: 20px;
  }
  

}

<h1 id="heading-sect-prod"> Our Products </h1>

  <div id="section-prod">

   <div id="box-1" class="boxes-prod">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem sint facere at non? Earum facere exercitationem saepe, ea animi molestiae asperiores sed? Dolorem modi dolores eaque voluptate facilis ipsum ducimus.
   
    <a href="" class="prod-sec">Read More></a>

   </div>

 

   <div id="box-2" class="boxes-prod">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem sint facere at non? Earum facere exercitationem saepe, ea animi molestiae asperiores sed? Dolorem modi dolores eaque voluptate facilis ipsum ducimus.
   
    <a href="" class="prod-sec">Read More></a>
   </div>


   <div id="box-3" class="boxes-prod">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem sint facere at non? Earum facere exercitationem saepe, ea animi molestiae asperiores sed? Dolorem modi dolores eaque voluptate facilis ipsum ducimus.
   
    <a href="" class="prod-sec">Read More></a>
   </div>


  </div>

please help me to finish this I have been working on this for long time and this is my first official website for a client.