# Aspect ratios

It's a good practice to tokenise aspect ratios for the images / videos in your project. You can do it with `aspectRatios` property in the config:

```typescript
export const shopstoryConfig = {
  //...
  aspectRatios: [
    {
      id: '9:4',
      value: '9:4',
      mapTo: "$panoramic"
    },
    {
      id: '5:7',
      value: '5:7'
    },
    {
      id: '20:7',
      value: '20:7'
    },
    {
      id: '4:1',
      value: '4:1',
      label: 'Super panoramic' // custom label
    },
    {
      id: '$portrait', // overriding built-in
      value: '4:5' ,
      mapTo: "$portrait"
    }
  ],
}
```

## Master tokens for aspect ratios

<table><thead><tr><th width="279.3333333333333">id</th><th>Label</th><th>Default value</th></tr></thead><tbody><tr><td><code>$panoramic</code></td><td>Panoramic</td><td>2:1</td></tr><tr><td><code>$landscape</code></td><td>Landscape</td><td>16:9</td></tr><tr><td><code>$square</code></td><td>Square</td><td>1:1</td></tr></tbody></table>