I don't understand this code for rows in media (css)

Hi I don't understand this code for cards

my container for cards is this before heigh of container is 100% and width is auto

  .container-cards {        display: grid;        grid-template-columns: repeat(3, auto);        grid-template-rows: repeat(2, 600px);        gap: 1em;    }

but when I tried to type media code it deosnt work for all cards the hegiht isnt the same like from the start. If I write instead for rows this grid-template-rows: repeat(5, 600px) the height will be fixed. I don't understand why this code doesn't work for rows set to auto.

   @media (max-width: 767px) {        /* Small screens: 1 card in a row */         .container-cards {            grid-template-rows: auto;            grid-template-columns: 1fr;          }      }