.tcg-portfolio-adv{

    &.tcg-masonry {
        .gridss .inner {
            height: auto;
        }
    }
    
    .filtering{

		.filter{
			padding: 11px 15px;
			border: 1px solid rgba(255,255,255,.1);
			border-radius: 30px;
			display: inline-block;
		}

		span{
			font-weight: 500;
			font-size: 13px;
			margin: 0 20px;
			cursor: pointer;
			position: relative;
            opacity: .7;

			&.active{
				opacity: 1;
			}

            &.text{
                pointer-events: none;
            }
		}
	}
    
    .gridss{
        width: 100%;
        .info-overlay{

            .item-img{
                position: relative;

                &:after{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #1d1d1d;
                    opacity: 0;
                    transition: all .4s;
                    pointer-events: none;
                }

                a{
                    width: 100%;
                }

                .info{
                    color: #fff;
                    position: absolute;
                    bottom: 40px;
                    left: 40px;
                    opacity: 0;
                    transform: translateY(40px);
                    transition: all .4s;
                    z-index: 2;
                }

                &:hover{

                    &:after{
                        opacity: .2;
                    }

                    .info{
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }
        }

        .inner{
            height: 400px;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
        }
    }

}


.tcg-metro{
    .gridss{
        .info-overlay{
            .item-img{
                height: 100%;
                position: relative;
                overflow: hidden;

                &:hover{
    
                    &:after{
                        opacity: .8;
                    }
    
                    .info{
                        
                        h6,
                        .tag{
                            transform: translateY(0);
                            opacity: 1;
                        }
    
                        .tag{
                            transition-delay: .2s;
                        }
                    }
                }

                &:after{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #1d1d1d;
                    transition: all .4s;
                    pointer-events: none;
                    opacity: 0;
                }
    
                .info{
                    color: #fff !important;
                    position: absolute;
                    text-align: center;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    transform: translateY(-50%);
                    overflow: hidden;
                    z-index: 2;
    
                    h6,
                    .tag{
                        transform: translateY(100px);
                        opacity: 0;
                        transition: all .6s;
    
                        a{
                            color: #fff !important;
                        }
                    }
    
                    .tag{
                        transition-delay: 0;
                    }
                }

                a{
                    height: 100%;
                    display: inline-block;
                }
            }
        }
        .inner{
            height: 100% !important;
        }
    }
    .items:nth-child(1){
        height: 530px;
    }
    .items:nth-child(2){
        height: 250px;
    }
    .items:nth-child(3){
        height: 530px;
    }
    .items:nth-child(4){
        height: 250px;
    }
    .items:nth-child(5){
        height: 530px;
    }
    .items:nth-child(6){
        height: 250px;
    }
    .items:nth-child(7){
        height: 250px;
    }
    .items:nth-child(8){
        height: 250px;
    }
}

@media screen and (max-width: 768px) {
    .tcg-portfolio-adv, .tcg-metro{

        .gallery{
            justify-content: center !important;
        }
        .filtering{
            .filter{
                padding: 10px;
                width: 100%;
        
                span{
                    margin: 0 10px;

                    &.text{
                        display: none;
                    }
                }
            }
        }
    }
}