:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/*
 * Note: CSS custom properties cannot be used directly inside @media queries
 * (e.g. `@media (min-width: var(--bp-md))` does not work). Hardcode the same
 * pixel values in @media rules and keep the names above as the source of truth.
 */