$gutter: map-get($spacing, 3);

@include add-breakpoint-prefixes {
  &col-1  { width: percentage(1/12)  !important; }
  &col-2  { width: percentage(2/12)  !important; }
  &col-3  { width: percentage(3/12)  !important; }
  &col-4  { width: percentage(4/12)  !important; }
  &col-5  { width: percentage(5/12)  !important; }
  &col-6  { width: percentage(6/12)  !important; }
  &col-7  { width: percentage(7/12)  !important; }
  &col-8  { width: percentage(8/12)  !important; }
  &col-9  { width: percentage(9/12)  !important; }
  &col-10 { width: percentage(10/12) !important; }
  &col-11 { width: percentage(11/12) !important; }
  &col-12 { width: percentage(12/12) !important; }

  &offset-1  { margin-left: percentage(1/12)  !important; }
  &offset-2  { margin-left: percentage(2/12)  !important; }
  &offset-3  { margin-left: percentage(3/12)  !important; }
  &offset-4  { margin-left: percentage(4/12)  !important; }
  &offset-5  { margin-left: percentage(5/12)  !important; }
  &offset-6  { margin-left: percentage(6/12)  !important; }
  &offset-7  { margin-left: percentage(7/12)  !important; }
  &offset-8  { margin-left: percentage(8/12)  !important; }
  &offset-9  { margin-left: percentage(9/12)  !important; }
  &offset-10 { margin-left: percentage(10/12) !important; }
  &offset-11 { margin-left: percentage(11/12) !important; }
}

// Add gutters to the full grid
.gutters {
  margin: 0 (-$gutter) !important;

  > .col {
    padding: 0 $gutter !important;
  }
}

// Base Column Float - must be applied to every column
.col { float: left !important; }

.br-row {
  margin: 0 auto;
  padding-left: map-get($spacing, 3);
  padding-right: map-get($spacing, 3);
  max-width: 768px;

  @media (min-width: $sm) {
    max-width: $md;
  }

  @media (min-width: $md) {
    padding-left: map-get($spacing, 5);
    padding-right: map-get($spacing, 5);
    max-width: $lg;
  }
}