.imagesgallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  --gap: 0;
  --minwidth-desktop: 200;
  --minwidth-mobile: 130;
  --height-ratio: 100;
  
  --gap-px: calc(var(--gap) * 1px);
  --minwidth-desktop-px: calc(var(--minwidth-desktop) * 1px);
  --minwidth-mobile-px: calc(var(--minwidth-mobile) * 1px);
  --height-ratio-percentage: calc(var(--height-ratio) * 1%);
}

.imagesgallery ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--minwidth-desktop-px), 100%), 1fr) ) ;
  gap: var(--gap-px);
  padding: 0;
  margin: 0;
  list-style: none;
}

@media only screen and (max-width: 992px) {
	.imagesgallery ul {
	  grid-template-columns: repeat(auto-fill, minmax(min(var(--minwidth-mobile-px), 100%), 1fr) ) ;
	}
}

.imagesgallery ul li {
	display:block;
	padding:0;
	margin:0;
	position: relative;
	z-index: auto;
}
.imagesgallery ul li:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1);
  z-index: -1;
}


.imagesgallery ul li a {
	display:block;
	padding-top:var(--height-ratio-percentage);
	overflow:hidden;
	position:relative;
}
.imagesgallery ul li a b {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	z-index:1;
}
.imagesgallery ul li a:hover b {
	transform:scale(1.2) rotate(4deg);
}
.imagesgallery ul li a i {
	display:block;
	z-index:5;
	position:absolute;
	top:50%;
	left:50%;
	width:3em;
	height:3em;
	text-align:center;
	font-size:16px;
	line-height:3em;
	margin-top:-1.5em;
	margin-left:-1.5em;
	color:#ffffff;
	background:#161d27;
	transform:scale(0);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.imagesgallery ul li a:hover i {
	transform:scale(1);
}