* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}
.grid-wrapper > div {
	justify-content: center;
	align-items: center; 
	overflow: hidden;
	border-radius: 5px;
	position: relative;
	transition: all 1.5s ease;
	cursor: pointer;
}
.grid-wrapper > div a{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 5px;
	position: relative;
	transition: all 1.5s ease;
}

.grid-wrapper > div > i{
	display: flex;
	position: absolute;
	bottom: 30px;
	right: 30px;
	z-index: 99;
transform: translateY(20px);
	opacity: 0;
	transition: all 1.5s ease;
}

.grid-wrapper > div > a i{
	display: flex;
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 99;
transform: translateY(20px);
	opacity: 0;
	transition: all 1.5s ease;
	color: #FFF;
}


.grid-wrapper > div:hover i {opacity: 1; transition: all 1.5s ease;
	  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}


.grid-wrapper  img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	transition: all 1.5s ease;
}

.grid-wrapper img:hover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	transition: all 1.5s ease;
	filter: grayscale(100%) brightness(80%);
  	transition: all 1.5s ease !important;
 	transform: scale(1.1);
}
.grid-wrapper a:hover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
	transition: all 1.5s ease;
	filter: grayscale(100%) brightness(80%);
  	transition: all 1.5s ease !important;
 	transform: scale(1.1);
}
.grid-wrapper img {
  	transition: all 1.5s ease !important;
}
.grid-wrapper a img {
  	transition: all 1.5s ease !important;
}

.grid-wrapper {
	display: grid;
	grid-gap: 7px;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-auto-rows: auto;
	grid-auto-flow: dense;
}

.grid-wrapper .wide {
	grid-column: span 2;
}

.grid-wrapper .tall {
	grid-row: span 2;
}

.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

.grid-wrapper .big2 {
	grid-column: span 2;
	grid-row: span 4;
}

.grid-wrapper .full {
	grid-column: span 3;
		grid-row: span 3;
}
.grid-wrapper .full a {
	grid-column: span 3;
		grid-row: span 3;
}



@media screen and (min-width:1025px) and (max-width:1099px){
  .grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  }
}


@media screen and (min-width:768px) and (max-width:1024px){
	.grid-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
		grid-gap: 7px;
	}
}

@media screen and (max-width:767px){
	.grid-wrapper{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 6px;
	}
	.mb7{
		margin-bottom: 6px !important;
	}
	.grid-wrapper > div > a i {
		bottom: 50%;
		left: 50%;
	}
}