$gray             : #494949
$gray-dark        : #393c43
$gray-light       : #989fa7
$gray-light-extra : #dce5ea
$pink             : #d3589e
$teal             : #487380
$teal-light       : #6cafb8
$white            : #fff

$tile-size: 21px

=prism-gradient($direction: bottom)
  color: $white
  
  .page-section__title,
  a
    color: $white
  
  .container
    z-index: 2

  &:before
    background-size: 1200px 507px
    background-image: url('http://cl.ly/image/0Z2d3z3W1N0K/prism-pattern.png')
    background-position: 50% 0%
    content: ''
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
    z-index: 0
  
  &:after
    background: linear-gradient(to $direction, $teal, rgba($teal, 0)), linear-gradient(to right, rgba($teal, 0.5), rgba($teal-light, 0.5), rgba($pink, 0.5))
    content: ''
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
    z-index: 1

body
  background: black
    
#tiles
  height: 130px
  left: 50%
  margin-top: -0.5px
  opacity: 0.75
  overflow: hidden
  position: absolute
  top: 290px
  transform: translate(-40%, -50%) rotate(45deg)
  width: 130px
  z-index: 2

.tile
  background: $teal-light
  display: block
  float: left
  height: $tile-size
  margin: 0 0 0.5px 0.5px
  width: $tile-size
  
// section
.page-intro
  +prism-gradient
  width: 100%
  margin: auto
  position: relative
  background-image: url('http://f.cl.ly/items/0x283w0W0R202j0c3w1T/landscape-1-full.jpg')
  background-size: cover
  background-position: 50% 50%
  height: 400px
  overflow: hidden
  display: block