import { Meta } from '@storybook/addon-docs';

<Meta title="Base/Layout" />

<style>
  {`
    .sbdocs-p {
        max-width:62ch;
    }
    .swatch {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }
    .swatch__sample {
        margin-bottom: 12px;
    }
    .swatch__sample-row {
        font-weight:400 !important;
    }
    .swatch__label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .swatch__label code {
        margin-bottom: 8px !important;
    }
    .swatch__label-pre {
        font-size: 13px;
        font-family: monospace;
    }
    
  `}
</style>

# Breakpoints

## Mobile

<div class="swatch">
    <div class="swatch__sample">
        <div class="swatch__sample-row">480px</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--bp-xs</pre></div>
        <div><pre class="swatch__label-pre">@media(min-width: map-get($mq-breakpoints, 'xs')</pre></div>
    </div>
</div>

## Tablet portrait / Mobile Landscape

<div class="swatch">
    <div class="swatch__sample">
        <div class="swatch__sample-row">768px</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--bp-sm</pre></div>
        <div><pre class="swatch__label-pre">@media(mi-width: map-get($mq-breakpoints, 'sm')</pre></div>
    </div>
</div>

## Tablet landscape / Small Desktop

<div class="swatch">
    <div class="swatch__sample">
        <div class="swatch__sample-row">1024px</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--bp-md</pre></div>
        <div><pre class="swatch__label-pre">@media(min-width: map-get($mq-breakpoints, 'md')</pre></div>
    </div>
</div>

## Desktop

<div class="swatch">
    <div class="swatch__sample">
        <div class="swatch__sample-row">1200px</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">--bp-lg</pre></div>
        <div><pre class="swatch__label-pre">@media(min-width: map-get($mq-breakpoints, 'lg')</pre></div>
    </div>
</div>