Media Query Not Working

<div class="media">
    <div class="cursor"></div>
  </div>

<div class="media">
    <div class="cursor"></div>
  </div>

@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 .3s forwards;
  border: 1px solid #FF004D;
}

@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 .3s forwards;
  border: 1px solid #FF004D;
}