Overriding CSS Grid Properties using Media Queries

Original Code

    section.new-features { 
    .new-features-right-col {
            .wrapper-newfeatures {
                 margin-top: 3em;
                 display: grid;
                 grid-template-columns: auto auto auto auto auto auto;
                 grid-column-gap: 31px;
                 grid-row-gap: 30px;
              }
    }

Media Query

    section.new-features {
        .wrapper-newfeatures {
             display: grid;
             grid-template-columns: auto;
             grid-gap: 2em;
             width: 90%;
        }
    }
}

Problem

I'm having difficulties overriding CSS Grid Properties within my media query section. Whenever I set the grid-template-columns: auto; which is only suppose to use one (1) grid column it gets overridden by the original code and uses six columns. I tried to troubleshoot this by using a ancestor element by typing body behind the CSS class but this doesn't seem to work. If anyone could assist me with this problem or help me approach this, it would be highly appreciated!