.gt-gallery-container {
	margin: 0px -15px;
	.grid-sizer {
		width: 33.33%;
		@media #{$lg,$md,$xs,$xxs} {
			width: 50%;
		}
		@media #{$xs,$xxs} {
			width: 100%; 
		}
	}
	.grid-sizer,
	.grid-item {
		float: left;
		overflow: hidden;
		position: relative;
		display: inline-block;
		img {
			width: 100%;
		}
	}
	.grid-item {
		padding: 15px;
	}
	.grid-size-33 {
		width: 33.33%;
		@media #{$lg,$md,$xs,$xxs} {
			width: 50%;
		}
		@media #{$xs,$xxs} {
			width: 100%; 
		}
	}
	.grid-size-25 {
		width: 22.2259%;
		@media #{$lg,$md,$xs,$xxs} {
			width: 50%;
		}
		@media #{$xs,$xxs} {
			width: 100%; 
		}
	}
	.grid-size-67 {
		width: 66.67777%;
		@media #{$lg,$md,$xs,$xxs} {
			width: 50%;
		}
		@media #{$xs,$xxs} {
			width: 100%; 
		}
	}
}
.gt-gallery-img-item {
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	&:before {
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		height: 100%;
		content: '';
		visibility: hidden;
		position: absolute;
		transition: all 500ms ease;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.gt-gallery-view {
		left: 0;
		top: 40%;
		right: 0;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		position: absolute;
		transform: translateY(-50%);
		transition: all 500ms ease;
		a {
			color: #fff;
			width: 100px;
			height: 100px;
			display: flex;
			font-size: 20px;
			margin: 0 auto;
			border-radius: 100%;
			align-items: center;
			justify-content: center ;
			background: var(--gt-gradient-1);
		}
	}
	&:hover {
		&:before {
			opacity: 1;
			visibility: visible;
		}
		.gt-gallery-view {
			top: 50%;
			opacity: 1;
			visibility: visible;
		}
	}
}