extends template

block title
  title GroundworkCSS ♥

block content
  .container
    .pad-left.pad-right
      h1.AverageSans.zero Example Layout 4
      p Right sidebar on top
    article.row
      aside.one.fourth.right-three.padded.border-left
        h1 Section Heading 1
        .row
          .one.whole.two-up-small-tablet.one-up-mobile
            ul.list
              li Unordered list item #1
              li Unordered list item #2
              li Unordered list item #3
              li Unordered list item #4
          .one.whole.two-up-small-tablet.one-up-mobile
            ol.list
              li Ordered list item #1
              li Ordered list item #2
              li Ordered list item #3
        hr
        h3 Section Heading 3
        .row
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
          .one.half.three-up-small-tablet.two-up-mobile.padded.align-center
            img(src='http://placehold.it/120x85/e74c3c/ffffff/', alt='')
      section.three.fourths.left-one.padded
        .cycle-slideshow(data-cycle-fx='scrollHorz', data-cycle-pause-on-hover='true')
          img(src='http://placehold.it/880x400/2ecc71/ffffff/&text=Slide+1', alt='')
          img(src='http://placehold.it/880x400/3498db/ffffff/&text=Slide+2', alt='')
          img(src='http://placehold.it/880x400/9b59b6/ffffff/&text=Slide+3', alt='')
          img(src='http://placehold.it/880x400/f1c40f/ffffff/&text=Slide+4', alt='')
        hr
        img.pull-left.gap-right.gap-bottom(src='http://placehold.it/300x200/f02475/ffffff/', alt='')
        h1 Section Heading 1
        p
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.
        hr
        img.pull-right.gap-left.gap-bottom(src='http://placehold.it/300x200/1abc9c/ffffff/', alt='')
        h3 Section Heading 3
        p
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.
        hr
        img.pull-left.gap-right.gap-bottom(src='http://placehold.it/300x200/34495e/ffffff/', alt='')
        h3 Section Heading 3
        p
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.