jss: Media queries doesn't work if you don't have non media query styling as well.

I have this jss code:

'@media only screen and (min-width: 720px)': {
    content: {
        padding: '0 32px 16px 64px'
    }
},
'@media only screen and (max-width: 720px)': {
    content: {
        padding: '0 16px 16px'
    }
}

and its compiled to

@media only screen and (min-width: 720px) {
  .content--jss-0-40 {
    padding: 0 32px 16px 64px;
  }
}
@media only screen and (max-width: 720px) {
  .content--jss-0-42 {
    padding: 0 16px 16px;
  }
}

How come its different class names. I guess they should be the same. The result is that the last one works, but not the first one.