.background
  position: fixed
  $list: $blue, $light-blue
  background: $medium-blue
  @include gradient(to bottom, $list)
  bottom: 0
  width: 100%
  height: 100%
  overflow: hidden
  +max-width($small)
    display: none

  &__front
    background: url(/images/background-front.svg) left bottom no-repeat
    bottom: 0
    left: 10%
    position: absolute
    height: 100%
    width: 100%

  &__back
    background: url(/images/background-back.svg) left bottom repeat-x
    bottom: 0
    left: 0
    position: absolute
    height: 200px
    width: 100%
.background
  position: fixed
  $list: $blue, $light-blue
  background: $medium-blue
  @include gradient(to bottom, $list)
  bottom: 0
  width: 100%
  height: 100%
  overflow: hidden
  +max-width($small)
    display: none

  &__front
    background: url(/images/background-front.svg) left bottom no-repeat
    bottom: 0
    left: 10%
    position: absolute
    height: 100%
    width: 100%
    z-index: 1
    +max-width($large)
      left: -8%

  &__back
    background: url(/images/background-back.svg) left bottom repeat-x
    bottom: 0
    left: 0
    position: absolute
    height: 200px
    width: 100%
    z-index: 0
Move the SURFboard to left on < large viewports
Move the SURFboard to left on < large viewports

When the viewport is smaller than large (1024px), then the surfboard is
moved to a position of '-8% left' of the viewport boundry. This makes
sure the image is well readable when the viewport size is smaller.

The SVG itself (not tracked in this repo) is updated, the sign is moved
to the left of the surfboard.

See point 1 of https://www.pivotaltracker.com/story/show/166437858
