breakpoints.js

// https://github.com/Lectrum/breakpoints-json

const breakpoints = {
  "phonePortrait": {
    "name": "phonePortrait",
    "min": "320",
    "max": "414"
  },
  "phoneLandscape": {
    "name": "phoneLandscape",
    "min":  "415",
    "max":  "667"
  },
  "tabletPortrait": {
    "name": "tabletPortrait",
    "min":  "668",
    "max":  "768"
  },
  "tabletLandscape": {
    "name": "tabletLandscape",
    "min":  "769",
    "max":  "1024"
  },
  "desktop": {
    "name": "desktop",
    "min":  "1025",
    "max":  "1366"
  },
  "desktopWide": {
    "name": "desktopWide",
    "min":  "1367",
    "max":  "1680"
  },
  "desktopHD": {
    "name": "desktopHD",
    "min":  "1681",
    "max":  "1920"
  },
  "desktopMega": {
    "name": "desktopMega",
    "min":  "1921",
    "max":  "2560"
  }
};

const customMedia = {
  "--phonePortrait": "(width <= 414px)",
  "--phoneLandscape": "(width >= 415px) and (width <= 667px)",
  "--tabletPortrait": "(width >= 668px) and (width <= 768px)",
  "--tabletLandscape": "(width >= 769px) and (width <= 1024px)",
  "--desktopS": "(width >= 1025px) and (width <= 1366px)",
  "--desktopM": "(width >= 1367px) and (width <= 1680px)",
  "--desktopL": "(width >= 1681px) and (width <= 1920px)",
  "--desktopXL": "(width >= 1921px)"
};