.gl.section
  display flex
  flex-direction column
  position relative

  &:not(.fitted)
    padding-bottom ($indent * 2)
    padding-top @padding-bottom

  &[class*='center aligned']
    align-items center
    text-align center

    .section
      flex-grow 1

  &.fixed
    min-height 480px

  &.inverted
    background $color-primary
    color #fff

  &.padded
    padding-bottom ($indent * 4)
    padding-top @padding-bottom

  &.pale
    background $color-pale

  &.dark
    background $color-dark

  &.grey
    background $color-grey-darkest
    color #fff

  /**
   * Special.
   */
  &.footer
    background $color-dark
    color hsla(#fff, .5)
    font-size .8em
    padding-bottom $indent
    padding-top @padding-bottom
    width 100%

    > .container
      overflow-x visible

    .gl.logo.icon

      > svg
        fill hsla(#fff, .2)

    .column
      overflow visible

  generateMosaicPattern($color)
    $size = 90px
    $light = 1%
    background-color $color
    background-image linear-gradient(45deg, lighten($color, $light) 25%, transparent 25%, transparent 75%, lighten($color, ($light * 2)) 75%, lighten($color, ($light * 2))),
    linear-gradient(45deg, lighten($color, 3%) 25%, transparent 25%, transparent 75%, lighten($color, ($light * 2)) 75%, lighten($color, ($light * 2))),
    linear-gradient(135deg, lighten($color, ($light * 3)) 25%, transparent 25%, transparent 75%, lighten($color, ($light * 4)) 75%, lighten($color, ($light * 4)))
    background-size $size $size
    background-position 0 0, ($size / 2) ($size / 2)

  &.mosaic
    color #fff

    &.grey
      generateMosaicPattern($color-grey-darkest)

    &.blue
      generateMosaicPattern($color-blue-darkest)

  &.gradient

    &.pale
      background-image radial-gradient(ellipse, #fff, $color-grey-lightest)