.carousel
    width: 100vw
    max-width: 1000px
    padding-bottom: 100px
    border-radius: 10px
    overflow: hidden
    padding: 0
    margin-bottom: 20px

.slide
    --transition-time: .5s
    // position: relative
    transition: var(--transition-time) filter
    -webkit-transition: var(--transition-time) -webkit-filter
    -moz-transition: var(--transition-time) -moz-filter
    -ms-transition: var(--transition-time) -ms-filter
    -o-transition: var(--transition-time) -o-filter

    width: 100vw
    max-width: 1000px
    height: 50vw
    max-height: 500px
    background-size: 100%
    background-repeat: no-repeat

    display: flex
    justify-content: center
    align-items: center
    z-index: 5

    .bgimg
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        transition: var(--transition-time) filter
        -webkit-transition: var(--transition-time) -webkit-filter
        -moz-transition: var(--transition-time) -moz-filter
        -ms-transition: var(--transition-time) -ms-filter
        -o-transition: var(--transition-time) -o-filter
        z-index: 6

    &:hover .bgimg
        filter: blur(3px)

    .overlay
        width: 100%
        height: 100%
        max-width: 1000px
        background-color: rgba(47,80,112,.8)
        // margin: 10vw
        // display: none
        opacity: 0
        z-index: 7
        transition: opacity .25s

        padding: 0 50px

        display: flex
        flex-direction: column
        justify-content: flex-start
        align-items: flex-start

    &:hover .overlay
        opacity: 1