@media doesn't work in stylus

Question

I don't want to show an image when the screen size is too small. Here I use @media to perform this task. The image has an id mpImage

#mpImage
  padding-top: 40

  @media (min-width: 480)
    display: none

But it doesn't have any response.

Further information: index.jade:

head
    meta(name='viewport', content='width=device-width')
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    .carousel
        img#mpImage(src="/images/mainP1.gif")
        .carousel-caption
            h1 Title

style.styl:

.carousel
  height: 500
  background-color: #888
#mpImage
  padding-top: 50
  @media screen and (max-width: 480)
    display: none

Answer 1

You have to use some type of unit. It's not JavaScript.

https://codepen.io/sheriffderek/pen/38a098554612f43cdda74d2a5e595f0a

For fun, here is how you would use a media query with a variable

$break-point-1 = '(min-width: 600px)'

html
    background: red
    @media $break-point-1
        background: blue
    @media (min-width: 1000px)
        background: green
    @media (min-width: 1400px)
        background: lightgreen