// Rows
.row
  position: relative
  width: 100%
  max-width: $gridMaxWidth
  margin: 0 auto

  @extend %clearfix

.grid-container
  position: relative
  width: 100% / 18 * (18 - 4)
  max-width: 1440px
  margin: 0 auto

  @extend %clearfix

  +respond-to(small-mobile)
    width: 100%

.grid-album-container
  position: relative
  width: 100% / 18 * (18 - 2)
  max-width: 1440px
  margin: 0 auto

  @extend %clearfix

  +respond-to(small-mobile)
    width: 100%

// Columns
[class*='column-']
  position: relative
  float: left
  min-height: 1px

@for $i from 1 through $gridColumns
  .column-#{$i}
    width: 100% / $gridColumns * $i

    +respond-to(mobile)
      width: 100%

  .margin-right-#{$i}
    margin-right: 100% / $gridColumns * $i

    +respond-to(mobile)
      margin-right: 0

  .margin-left-#{$i}
    margin-left: 100% / $gridColumns * $i

    +respond-to(mobile)
      margin-left: 0

  .padding-right-#{$i}
    padding-right: 100% / $gridColumns * $i

  .padding-left-#{$i}
    padding-left: 100% / $gridColumns * $i


.padding-right-half
  padding-right: 100% / $gridColumns * .5

.column-half
  width: 50%