.card.styleguide-intro.styleguide-block.copy--body.context--content
  %h1.copy--h1 Proportional Grid
  %p
    The main grid in waldorf is based on the width of one card. Landing pages more often use this proportional grid.

- gutters = [10,15,20,30]

- gutters.each do |gutter|
  .styleguide-block.styleguide-grid.context--content
    %p.copy--h2 Proportional Grid with a ten pixel gutter (.grid-wrapper--#{gutter})
    %div{class: "grid-wrapper--#{gutter}"}
      - 2.times do
        .col--one-half
          .card.copy--h4 .col--one-half

    %div{class: "grid-wrapper--#{gutter}"}
      - 3.times do
        .col--one-third
          .card.copy--h4 .col--one-third

    %div{class: "grid-wrapper--#{gutter}"}
      - 4.times do
        .col--one-quarter
          .card.copy--h4 .col--one-quarter

    %div{class: "grid-wrapper--#{gutter}"}
      - 5.times do
        .col--one-fifth
          .card.copy--h4 .col--one-fifth

.card.styleguide-intro.styleguide-block.copy--body.context--content
  %h1.copy--h1 Proportional Grid
  %p
    The main grid in waldorf is based on the width of one card. Landing pages more often use this proportional grid.

- gutters = [10,15,20,30]

- gutters.each do |gutter|
  .styleguide-block.styleguide-grid.context--content
    %p.copy--h2 Proportional Grid with a #{gutter} pixel gutter (.grid-wrapper--#{gutter})
    %div{class: "grid-wrapper--#{gutter}"}
      - 2.times do
        .col--one-half
          .card.copy--h4 .col--one-half

    %div{class: "grid-wrapper--#{gutter}"}
      - 3.times do
        .col--one-third
          .card.copy--h4 .col--one-third

    %div{class: "grid-wrapper--#{gutter}"}
      - 4.times do
        .col--one-quarter
          .card.copy--h4 .col--one-quarter

    %div{class: "grid-wrapper--#{gutter}"}
      - 5.times do
        .col--one-fifth
          .card.copy--h4 .col--one-fifth

Fix up titling for grids in styleguide
Fix up titling for grids in styleguide
