## Breakpoints and Custom Media

For high-level documentation on responsive design, see the [related documentation on breakpoints](/?path=/docs/base-theme-breakpoints--page) under our Base Theme.

### Using Breakpoints in React

We use [PostCSS custom media](https://preset-env.cssdb.org/features#custom-media-queries) to capture our breakpoints.

```css
/* @hashicorp/react-global-styles/custom-media.css */

@custom-media --small (max-width: 767px);
@custom-media --small-up (min-width: 0px);
@custom-media --medium (min-width: 768px) and (max-width: 1119px);
@custom-media --medium-up (min-width: 768px);
@custom-media --large (min-width: 1120px);
```

In a consuming stylesheet, we can then reference these custom media declarations:

```css
@import '@hashicorp/react-global-styles/custom-media.css';
@import '@hashicorp/react-global-styles/custom-properties/color.css';

.custom-media-demo {
  padding: 4rem 0;
  width: 100%;

  @media (--small) {
    background: var(--brand-l3);
  }

  @media (--medium) {
    background: var(--brand-l2);
  }

  @media (--large) {
    background: var(--brand-l1);
  }
}
```

**Note** that [Custom Media Queries are a "Stage 1" proposal](https://preset-env.cssdb.org/features#custom-media-queries), so they're included in our [default PostCSS configuration](https://github.com/hashicorp/nextjs-scripts/blob/master/plugins/with-css.js) of using [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) with `{ stage: 0 }`.