.image-gradient-dynamic
  $image-gradient-color-top: red
  $transparency-top: 0.9
  $image-gradient-color-bottom: green
  $transparency-bottom: 0.6
  $vertical-angle: 0deg
  $image-gradient-color-left: teal
  $transparency-left: 0.8
  $image-gradient-color-right: yellow
  $transparency-right: 0.8
  $horizontal-angle: 90deg
  line-height: 0
  position: relative
  width: 100%
  img
    height: auto
    left: 0
    position: relative
    top: 0
    width: 100%
  .copy
    +transform(translate(-50%, -50%))
    left: 50%
    margin: auto
    position: absolute
    text-align: center
    top: 50%
    z-index: 999
    p
      color: white
      font-weight: 800
      line-height: 1.5em
      padding: 1em 2em
      position: relative
  .overlay
    +linear-gradient($vertical-angle, transparentize($image-gradient-color-top, $transparency-top), transparentize($image-gradient-color-bottom, $transparency-bottom))
    display: block
    +position(absolute, 0px 0px 0px 0px)
    &:after
      +linear-gradient($horizontal-angle, transparentize($image-gradient-color-left, $transparency-left), transparentize($image-gradient-color-right, $transparency-right))
      +position(absolute, 0px 0px 0px 0px)
      content: ''
      display: block