const screens = {
  tablet: 768,
  laptop: 1024,
  'laptop-hd': 1280,
  desktop: 1680,
  'desktop-xl': 1921,
};

const threshold = 0;

export function min(breakpoint: keyof typeof screens) {
  return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
}
export function max(breakpoint: keyof typeof screens) {
  return `@media (max-width: calc(${screens[breakpoint]}px))`;
}

export const breakpoints = Object.values(screens).map((value) => `${value + threshold}px`);