section.media#media

  h2 Media
  p Media elements, such as pictures, videos or iframes have a maximum width of <code>100%</code> so they never overflow the parent container.

  h3 Images with captions
  p For images with a caption use <code>figure</code> and <code>figcaption</code> element.

  figure
    img(src='http://placehold.it/700x300?text=350x300', width='300')
    figcaption Image description

  :markdown
    ```html
      <figure>
        <img src='http://placehold.it/700x300?text=350x300' />
        <figcaption>Image description</figcaption>
      </figure>
    ```

  h3 Media with an outline
  p Having an outline around any type of media can be added by using <code>media-outlined</code> class.

  figure.media-outlined
    img(src='http://placehold.it/700x300?text=350x300', width='300')

  :markdown
    ```html
      <figure class='media-outlined'>
        <img src='http://placehold.it/700x300?text=350x300' />
      </figure>
    ```

  h3 Multiple images
  p Multiple images should be placed in one <code>figure</code> element.

  figure
    img(src='http://placehold.it/400x400?text=200x200', width="200")
    img(src='http://placehold.it/400x400?text=200x200', width="200")
    img(src='http://placehold.it/400x400?text=200x200', width="200")

  :markdown
    ```html
      <figure>
        <img src='http://placehold.it/400x400?text=200x200'/>
        <img src='http://placehold.it/400x400?text=200x200' />
        <img src='http://placehold.it/400x400?text=200x200' />
      </figure>
    ```