export const breakpointOrigin = {
  xs: '0px',
  s: '600px',
  m: '1024px',
  l: '1366px',
  xl: '1536px',
  xxl: '1920px',
  xxxl: '2560px',
} as const;

const makeBreakpoint = (key: keyof typeof breakpointOrigin) =>
  `@media (max-width: ${breakpointOrigin[key]})`;

export const breakpoint = {
  s: makeBreakpoint('s'),
  m: makeBreakpoint('m'),
  l: makeBreakpoint('l'),
  xl: makeBreakpoint('xl'),
  xxl: makeBreakpoint('xxl'),
  xxxl: makeBreakpoint('xxxl'),
};