# Breakpoint variables
Voca components are built with a small-screen first approach, meaning that everything in your style that is not wrapped 
inside a breakpoint mixin will be applied on small/all screens until you make style changes inside the telia-breakpoint mixin.

The telia breakpoint media queries are using em values. When em values are used in media queries, it
calculates based on the root font-size and not on the parent font-size. This is useful when the user is zooming the page,
then the page will break into a UI that is designed for smaller screen sizes instead of horizontal page scroll.

The mixins are using only min-width, so when you are using the mixin `telia-breakpoint('md')`, your styles will be applied
from the medium breakpoint and up. 

## Fluid variables
The 'fluid' variables `$telia-fluid-breakpoint-medium` and `$telia-fluid-breakpoint-xlarge`, are used in the typography 
fluid fonts to calculate when the font should stop growing or shrinking. These variables always need to be consistent 
with their corresponding em variables. Since the 'fluid-variables' are not used in a media query but in a calculation, 
they need to have the same value as the other values in that calculation. That is 
why they need to be in rem and not in em.
