@use "../utilities" as *;

/**----------------------------------------
START: Page Header CSS
----------------------------------------*/

.insta-wrap{
    padding: 0 15px;
}

.insta-item{
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    .overlay{
        background-color: var(--ed-color-theme-primary);
        height: 0;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        @include transition (all 0.3s ease-in-out);
    }
    .intra-thumb{
        height: 307px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }
    .icon{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        @include transition (all 0.3s ease-in-out);
        a{
            background-color: var(--ed-color-common-white);
            color: var(--ed-color-theme-primary);
            height: 50px;
            width: 50px;
            border-radius: 50%;
            @include flex-center;
        }
    }
    &:hover{
        .overlay{
            height: 100%;
        }
        .icon{
            transform: translate(-50%, -50%) scale(1);
        }
    }
}


/* !END:  Page Header CSS */