:root {
    --bp-sm:  576px;
    --bp-md:  768px;
    --bp-lg:  992px;
    --bp-xl:  1200px;
    --bp-xxl: 1400px;
}

/* Usage in media queries (CSS variables cannot be used inside @media conditions,
   so use the raw values directly):

   @media (min-width: 576px)  { }   sm  — small devices
   @media (min-width: 768px)  { }   md  — tablets
   @media (min-width: 992px)  { }   lg  — laptops
   @media (min-width: 1200px) { }   xl  — desktops
   @media (min-width: 1400px) { }   xxl — large desktops

   The variables (var(--bp-sm) etc.) are available for use in JS and in
   non-@media CSS properties such as max-width, min-width on elements.
*/