# Breakpoints
> A named set of screen sizes that form the basis of responsive rules in Vera.

## Overview

Vera provides a set of breakpoints to maintain a consistent set of conditions when designing responsive experiences.

A breakpoint is a condition that results from a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). Media queries are used to query specific characteristics of the displaying device or environment, such as viewport width. Vera breakpoints are based on the width specific media queries.

<Callout variant="tip">

If you need to translate `em` sizes to pixel sizes, multiply `em` value by
`16`

</Callout>

## Available tokens

<SpecTable columns="auto 1fr" titles={['Token', 'Value']}>
  {Object.entries(mediaQueryTokens).map(([key, value]) => (
    <Fragment key={key}>
      <div>
        <InlineCode>{key}</InlineCode>
      </div>
      <div>{value}</div>
    </Fragment>
  ))}
</SpecTable>

## Usage

To make responsive styling easier, breakpoints can be targeted through component props, such as responsive props on `Flex` or `Grid` components.
These props accept an object as value for mobile-first responsive styles.

To find out more about how you use responsive design with layout, see [Grid documentation](/components/layout/grid).

You can also use these breakpoints in `styled()` or `css` by prefixing the key with `@`, e.g. `@mqLargeAndUp` to create mobile-first responsive styles.
Check out the [Stitches documentation](https://stitches.dev/docs/responsive-styles) to learn more.

```jsx
import { styled } from '@gemini-suite/vera-react';

const Section = styled('section', {
  padding: '$spacingM',
  '@mqLargeAndUp': { padding: '$spacingXl' }
});
```

```jsx
import { Box } from '@gemini-suite/vera-react';

<Box
  css={{
    color: '$foregroundNeutralSubtle',
    '@mqMediumAndUp': { color: '$foregroundNeutral' },
    '@mqXlargeAndUp': { color: '$foregroundAccentModerate' }
  }}
>
  Hello World
</Box>;
```

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://github.com/Volue/vera/tree/next/design-primitives/design-media-queries"
      title="See media query tokens repo"
      actionIcon="arrowRight"
    />
  </GridItem>
  <GridItem>
    <Card
      href="/components/layout/grid"
      title="See Grid layout component"
      actionIcon="arrowRight"
    />
  </GridItem>
</Grid>