+route(style,base)

  .figure-crop
    overflow : hidden
    // height   : auto
    width    : 100%
    position: relative
    img
      width     : 100%
      max-width : 100%
      height    : auto
      display   : block
      position  : relative

  .figure-crop--wrapper
    position: absolute
    &.zoom--15
      img
        max-width : 150%
        width     : 150%
      @for $i from 1 through 10
        &.top--#{$i}
          top: 0 - ( 10 * $i * 1.5 + 0%)
        &.left--#{$i}
          img
            left: 0 - ( 10 * $i * 1.5 + 0%)
    &.zoom--20
      img
        max-width : 200%
        width     : 200%
      @for $i from 1 through 10
        &.top--#{$i}
          top: 0 - ( 10 * $i * 2 + 0%)
        &.left--#{$i}
          img
            left: 0 - ( 10 * $i * 2 + 0%)

    &.zoom--30
      img
        max-width : 300%
        width     : 300%
      @for $i from 1 through 10
        &.top--#{$i}
          top: 0 - ( 10 * $i * 3 + 0%)
        &.left--#{$i}
          img
            left: 0 - ( 10 * $i * 3 + 0%)

  .figure--slide
    width: 100%
    height: 100%
    +relative
    img
      width: 100%
      height: auto
      display: block

    .figcaption--wrapper
      +absolute(0.1 0 0 0.1)
      z-index: 20
      width: 100%
      display: table


    .figcaption--position
      display: table-cell
      height: 100%
      &.fc--middle
        vertical-align: middle
      &.fc--bottom
        vertical-align: bottom

      .figure--caption
        +relative
    @if nth($layout-fluid-behavior,2) != false
      &.caption-responsive--normal
        @media (max-width: nth($layout-second-grid,1) + 0px)
          .figcaption--wrapper
            height: inherit !important
            position: relative !important
            display: block
            padding-top: 10px !important
            padding-bottom: 10px !important
          .figcaption--position
            display: block
            height: inherit !important
            .figure--caption
              float: none !important
              width: 100% !important
              top: 0 !important
              bottom: 0 !important
              left: 0 !important
              right: 0 !important
              text-align: left !important
      &.caption-responsive--small
        @media (max-width: $bp-mobile  - 1px)
          .figcaption--wrapper
            height: inherit !important
            position: relative !important
            display: block
            padding-top: 10px !important
            padding-bottom: 10px !important
          .figcaption--position
            display: block
            height: inherit !important
            .figure--caption
              float: none !important
              width: 100% !important
              top: 0 !important
              bottom: 0 !important
              left: 0 !important
              right: 0 !important
              text-align: left !important