Zurb Foundation - Remove grid padding on smaller screens?

I am trying to remove the padding right and left on smaller screen for the grid items below:

<!-- row block -->
<div class="row row-cards">

    <!-- grid container -->
    <div class="grid-container">

        <!-- grid x -->
        <div class="grid-x grid-padding-x">

            <!-- item -->
            <div class="cell medium-6">
                xxx
            </div>
            <!-- item -->

            <!-- item -->
            <div class="cell medium-6">
                xxx
            </div>
            <!-- item -->

        </div>

    </div>

</div>
<!-- row block -->

CSS:

/* Small only */
@media screen and (max-width: 39.9375em) {
    .row-cards {
        .grid-container {
            padding: 0;
        }

        .grid-padding-x {
            padding: 0;

            .cell {
                padding: 0 !important;
            }
        }
    }
}

But the overwrite does not work. This is what I get:

This is what I am trying to get:

Any ideas?

My hack (LESS):

/* Small only */
@media screen and (max-width: 39.9375em) {
    .row {
        background-color: #ffffff;

        .grid-container {
            padding-right: 10px;  // a temporary hack
            padding-left: 10px; // a temporary hack
            max-width: 100%;
            margin: 0 auto;
        }

        .grid-padding-x {
            .cell {
                padding-right: 0;
                padding-left: 0;
            }
        }

    }
}