md-whiteframe {
  background: #fff;
  margin: 30px;
  height: 100px;
}

/* For breakpoint `-xs` */
@media (max-width: 599px) {
  md-whiteframe {
    margin: 7px;
    height: 50px;
    background-color: #c8e4fa;
  }
  md-whiteframe > span {
    font-size: 0.4em;
  }
}

/* For breakpoint `-sm` */
@media (min-width: 600px ) and (max-width: 959px) {
  md-whiteframe {
    margin: 20px;
    height: 75px;
  }
  md-whiteframe > span {
    font-size: 0.6em;
  }
}

/* For breakpoint `-md` */
@media (min-width: 960px ) and (max-width: 1279px) {
  md-whiteframe {
    margin: 20px;
    height: 90px;
    background-color: #fcddde;
  }
  md-whiteframe > span {
    font-size: 0.9em;
  }
}

/* For breakpoint `-gt-md` */
@media (min-width: 1280px) {
  md-whiteframe {
    margin: 25px;
    height: 100px;
    background-color: #F2FCE2;
  }
  md-whiteframe > span {
    font-size: 1.0em;
  }
}