@use '../abstracts' as *;
/*----------------------------------------*/
/*  04. BANNER CSS START
/*----------------------------------------*/

.banner{
    &__item{
        position: relative;
        @include border-radius(3px);
        overflow: hidden;
        &::after,
        &::before{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            -webkit-transition: all .4s linear;
            -moz-transition: all .4s linear;
            -ms-transition: all .4s linear;
            -o-transition: all .4s linear;
            transition: all .4s linear;
        }
        &::before{
            z-index: 1;
        }
        &:hover{
            &::after{
                top: 50%;
                bottom: 50%;
                background: rgba(255,255,255,.2);
            }
            &::before{
                right: 50%;
                left: 50%;
                background: rgba(255,255,255,.2);
            }
        }
        &-sidebar{
          @media #{$lg}{
            padding-top: 40px;
          }
        }
    }
}
