.image-slider
  width: 100%
  overflow: visible
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

  .placeholder
    position: relative
    width: 100%
    cursor: move

    .controllers
      position: relative
      z-index: 3
      width: 100%
      height: 0
      padding-bottom: 66.67%

      +respond-to-width(1350)
        padding-bottom: 100%

      .nav-item
        position: absolute
        +flex(center, center)
        bottom: -50px
        width: 35px
        height: 35px
        cursor: pointer
        border-radius: 100%
        transition: background 0.3s

        span
          +flex(center, center)
          height: 16px
          width: 16px
          transform-origin: center
          transition: transform 0.3s

          .arrow-icon
            position: relative
            width: 10px
            height: 16px
            transform-origin: center
            .st0
              fill: white

        &.previous
          background-color: $brightBlue
          right: calc(50% + 3px)

          span
            .arrow-icon
              transform: rotate(90deg)

          &:hover
            background-color: lighten($brightBlue, 5%)

        &.next
          background-color: $red
          left: calc(50% + 3px)


          span
            .arrow-icon
              transform: rotate(270deg)

          &:hover
            background-color: darken($red, 5%)



    figure
      position: absolute
      z-index: 1
      top: 0
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.4s

      span
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background-size: cover
        background-position: center

        &.small
          display: none

        +respond-to-width(480)
          &.medium
            display: none

          &.small
            display: block

      &.active
        z-index: 2
        opacity: 1