.flex-gallery{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.image-rate{
  position: relative;
  overflow: hidden;
  height: 250px;

  flex-grow: 1;
}

.image-rate img{
  width: auto;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  cursor: pointer;
  margin-top: 0px;
 border-radius: 0px;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);

  will-change: auto;
  transition: all .5s ease-in-out;
}

.image-rate:after{
content: '⤢';
cursor: pointer;
font-weight: bold;
font-size: 28px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.8);
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
color: #fff;
opacity: 0;
transition: all 300ms ease-in;
}

.image-rate:hover img{

  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;




}
.image-rate:hover:after{opacity: 0.5}

#fullimage{
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
cursor: -webkit-zoom-out;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

#fullimage img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

@media (max-width: 480px){
.image-rate{
width: calc(50% - 5px);
height: calc(50vw - 5px);
}
}