/*---==================
    02. Elements  
    
        # 11 Gallery CSS
=================----*/

.gallery-item{
    &.style-one{
        &:hover{
            & .gallery-img{
                & .hover-content{
                    visibility: visible;
                    opacity: 1;
                    & .insta-icon{
                        @include transform(translateY(0)); 
                    }
                }
            }
        }
        & .gallery-img{
            position: relative;
            overflow: hidden;
            & img{
                width: 100%;
            }
            & .hover-content{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.7);
                @extend %flex-center;
                visibility: hidden;
                opacity: 0;
                @include transition(.35s);
                & .insta-icon{
                    font-size: 30px;
                    @extend %white-color;
                    @include transform(translateY(-50px));
                    @include transition(.35s);
                }
            }
        }
    }
    &.style-two{
        &:hover{
            & .gallery-img{
                & .hover-content{
                    visibility: visible;
                    opacity: 1;
                }
                & .gallery-content{
                    transform: translateY(0px);
                }
            }
        }
        & .gallery-img{
            position: relative;
            overflow: hidden;
            & img{
                width: 100%;
            }
            & .hover-content{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
                padding: 30px;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                visibility: hidden;
                opacity: 0;
                transition: all .3s ease-in-out;
            }
        }
        & .gallery-content{
            text-align: center;
            transform: translateY(30px);
            transition: all .35s ease-in;
            & h4.title{
                @extend %white-color;
                margin-bottom: 10px;
                text-transform: uppercase;
            }
            & span{
                color: rgba(255, 255, 255, 0.7);
                font-size: 18px;
                font-weight: 500;
            }
        }
    }
}