Breakpoint tokens

/* Breakpoint reference — custom properties can't be used
   inside @media, but this documents your system in one place */
:root {
  --bp-sm:  640px;   /* large phones, small tablets */
  --bp-md:  768px;   /* tablets */
  --bp-lg:  1024px;  /* small laptops */
  --bp-xl:  1280px;  /* desktops */
  --bp-2xl: 1536px;  /* wide screens */
}

/* Modern range syntax — more readable than min/max-width */
@media (width >= 640px)  { /* sm and up  */ }
@media (width >= 768px)  { /* md and up  */ }
@media (width >= 1024px) { /* lg and up  */ }
@media (width >= 1280px) { /* xl and up  */ }
@media (width >= 1536px) { /* 2xl and up */ }

/* Range query — between two breakpoints */
@media (640px <= width < 1024px) {
  /* tablet only — sm to below lg */
}

/* Container query equivalent */
@container (width >= 640px) {
  /* component responds to its container, not viewport */
}

You are a senior frontend engineer defining a responsive breakpoint
system using modern CSS media query range syntax.

Goal: Create a 5-breakpoint system (sm, md, lg, xl, 2xl) using
modern range syntax. Include a reference comment block with the
custom property values even though they can't be used in @media.

Constraints:
- Use @media (width >= Xpx) range syntax, not min-width.
- Show both viewport media queries and container query equivalents
  for each breakpoint.
- Add a "below breakpoint" example using @media (width < 640px).
- Explain in a comment why custom properties can't be used in
  @media conditions.
- Show a practical example: a .grid that's 1 column on mobile,
  2 columns at sm, 3 columns at lg.

Framework variant: Show how to map these to Tailwind's screens
config and how the same breakpoints work in CSS Modules.

Return only the CSS with inline comments.