/* ==========================================================================
   Default styling for images block
   ========================================================================== */
.images
  .image-slider
    width: 100%
    overflow: visible
    background-color: rgba($brown, 0.2)
    //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%

        .nav-item
          position: absolute
          +flex(center, center)
          bottom: -50px
          width: 35px
          height: 35px
          cursor: pointer
          border: 1px solid rgba($brown, 0.7)
          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
            right: calc(50% + 3px)

            span
              transform: rotate(180deg)

          &.next
            left: calc(50% + 3px)

          &:hover
            background-color: rgba($brown, 0.6)



      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

  > picture
    width: 100%
    img
      width: 100%