fix(card,tabs,toolbar): Make media query breakpoints follow Material spec (#9284)

Author: josephperrott

src/lib/core/style/_variables.scss

@@ -1,8 +1,7 @@
 // Media queries
-// TODO: Find a way to respect media query ranges.
-// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
-$mat-xsmall: 'max-width: 600px';
-$mat-small: 'max-width: 960px';
+// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
+$mat-xsmall: 'max-width: 599px';
+$mat-small: 'max-width: 959px';
 
 // TODO(crisbeto): this isn't being used anywhere within Material. keeping for backwards compat.
 $mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;