common.css

:root {

	/* ---- color ------*/
	--color-pinterest: rgba(203,32,39,1);
	--color-google: rgba(205,32,31,1);
	--color-twitter: rgba(85,172,238,1);
	--color-facebook: rgba(59,89,152,1);
	--color-instagram: rgba(60,90,150,1);

	/* ---- breakpoint ------*/
	--breakpoint-100: 0em;
	--breakpoint-200: 30em;
	--breakpoint-300: 37.5em;
	--breakpoint-400: 52.5em;
	--breakpoint-500: 60em;
	--breakpoint-600: 80em;
	--breakpoint-700: 90em;
	--breakpoint-800: 100em;
	--breakpoint-900: 120em;

	/* ---- media-query ------*/
	@custom-media --mq-100 (width >= 0em); 
	@custom-media --mq-100-max (width < 37.5em); 
	@custom-media --mq-100-only (width >= 0em) and (width < 37.5em);
	@custom-media --mq-200 (width >= 37.5em); 
	@custom-media --mq-200-max (width < 60em); 
	@custom-media --mq-200-only (width >= 37.5em) and (width < 60em);
	@custom-media --mq-300 (width >= 60em); 
	@custom-media --mq-300-max (width < 80em); 
	@custom-media --mq-300-only (width >= 60em) and (width < 80em);
	@custom-media --mq-400 (width >= 80em); 
	@custom-media --mq-400-max (width < 120em); 
	@custom-media --mq-400-only (width >= 80em) and (width < 120em);

	/* ---- column-number ------*/
	--column-number-400: 4;
	--column-number-500: 8;
	--column-number-600: 12;

	/* ---- gutter ------*/
	--gutter-500: 1em;
	--gutter-600: 1.5em;

	/* ---- z ------*/
	--z-0: 0;
	--z-100: 100;
	--z-200: 200;
	--z-300: 300;
	--z-400: 400;
	--z-500: 500;
}