// Layout
//
// Styles for managing the structural hierarchy of the site.

.container {
  max-width: $container-width;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;
  margin-left: auto;
  margin-right: auto;
}

footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 3rem;
  color: #6f6f6f;
  border-top: 1px solid #ddd;

  small {
    display: block;
  }
}


// Grid system
//
// Create rows with `.row` to clear the floated columns and outdent the
// padding on `.column`s with negative margin for alignment.

.row {
  @include clearfix;
  margin-left: -$grid-gutter;
  margin-right: -$grid-gutter;
}

.column {
  float: left;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;

  @media (max-width: $grid-breakpoint) {
    float: none;
    width: 100%;
  }
}

// Column widths
@media (min-width: $grid-breakpoint) {
  .one-third {
    width: 33.333333%;
  }

  .two-thirds {
    width: 66.666667%;
  }

  .one-fourth {
    width: 25%;
  }

  .one-half {
    width: 50%;
  }

  .three-fourths {
    width: 75%;
  }

  .one-fifth {
    width: 20%;
  }

  .four-fifths {
    width: 80%;
  }
}

// Additional CLearfix
.clearfix {
  @include clearfix;
}

// Divider between heading and content
.divider {
  margin: 1.1rem auto;
  max-width: 12rem;
  border: 0;
  border-top: 2px solid #ddd;
}