// Slider
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.slider
    position: relative
    overflow: hidden
    height: 300px

    &.short
        height: 200px

    &.tall
        height: 600px

    &.full
        height: 100vh

    .slides
        display: flex
        width: 100%
        height: 100%
        transition: all 1s ease-in-out

        .slide
            width: 100%
            height: 100%

    .slider-control
        position: absolute
        top: 50%
        transform: translate3d(0px, -50%, 0px)
        opacity: 0.5
        transition: all 0.3s ease-in-out

        &:hover
            opacity: 1
            cursor: pointer

        &.slide-left
            left: 10px
        &.slide-right
            right: 10px

    .dots
        position: absolute
        bottom: 10px
        text-align: center
        width: 100%

        .dot
            display: inline-block
            height: 10px
            width: 10px
            border-radius: 100%
            margin: 0 5px
            opacity: 0.5
            cursor: pointer
            transition: all 0.3s ease-in-out

            &:hover
                opacity: 1

            &.is-active
                opacity: 1