const breakpoints = {
	giant: 1200,
	xl: 1200,
	desktop: 992,
	lg: 992,
	tablet: 768,
	md: 768,
	phone: 576,
	sm: 576,
	smaller: 575,
	xs: 575
};

const media = Object.keys(breakpoints).reduce((acc, label) => {
	acc[label] = (...args) => css`
	  @media (max-width: ${breakpoints[label]}px) {
		${css(...args)}
	  }
	`;
	return acc;
}, {});


export const MobileOnly = (el) => {
	return styled(el)`
		display:none;
		${media.md`
			display:block;
		`};
	`;
};