# Breakpoints

Breakpoints define shared viewport widths for adapting layouts across screen sizes.

Use breakpoint tokens in media queries to keep responsive layout changes consistent. Choose when to adapt a layout based on its content, rather than assuming a particular device.

## Tokens

| Token               | Value  |
| ------------------- | ------ |
| `breakpointMobile`  | 320px  |
| `breakpointTablet`  | 768px  |
| `breakpointDesktop` | 1024px |

## Usage

```tsx
import styled from 'styled-components'
import {tokens} from '@pleo-io/telescope'

const Layout = styled.div`
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: ${tokens.breakpointTablet}) {
        grid-template-columns: repeat(2, 1fr);
    }
`
```