Responsive design using @media to change height

I'm using @media method to change #services div height once the screen resizing to 600px width. but for some reason the div height doesn't change and he remains the same.

I'm using grid to change .service divs position once screen is resizing, but when they align downwards the #services div doesn't change his height. I believe he should be changing once @media get activated.

The grid to change service classes once screen resizing:

.container-grid {
    margin-left: 17%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, 350px);
    grid-template-rows: repeat(2, 400px);
}

The @media to change #services height once screen resizing to auto height:

#services {
  padding-top: 100px;
  background-color: #000;
  height: 600px;
  padding-bottom: 10px;
  z-index: 0;
}
@media only screen and (max-width: 600px) {
  #services {
    height: auto;
  }
}

Codepen

How can I change #services height from 600px to auto height once screen width changes?