md-whiteframe, div.padded {
  background: #fff;
  height: 100px;
}

md-whiteframe:focus, div.padded:focus {
  outline: none;
}

.layout-margin div.padded {
  margin: 16px 8px;
}

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

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

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

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