@use '../utils' as *;

/*=============================
    	12. gallery
===============================*/

.td-gallery{
    &-thumb{
        border-radius: 20px;
        &::before{
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #5033ff;
            border-radius: 20px;
            transform: scale(.6);
            visibility: hidden;
            transition: all .4s ease;
            opacity: 0;
        }
        & img{
            border-radius: 20px;
        }
    }
    &-icon{
        & span{
            font-size: 25px;
            color: var(--td-common-black);
            width: 60px;
            height: 60px;
            border-radius: 8px;
            line-height: 67px;
            text-align: center;
            display: inline-block;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            position: absolute;
            z-index: 3;
            background: var(--td-common-white);
            transform: scale(.6);
            visibility: hidden;
            transition: all .4s ease;
            opacity: 0;
            transition-delay: .2s;
        }
    }
    &-wrap{
        &:hover{
            & .td-gallery-thumb{
                &::before{
                    transform: scale(1);
                    opacity: 0.85;
                    visibility: visible;
                }
            }
            & .td-gallery-icon span{
                transform: scale(1);
                opacity: 1;
                visibility: visible;
            }
        }
    }
}