.mod-images-grid{
  --grid-gutter: 1px;
  
  margin-left: calc(var(--grid-gutter) / -2);
  margin-right: calc(var(--grid-gutter) / -2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mod-images-grid > li {
  flex: 0 0 50%;
  max-width: 50%;
  padding: calc(var(--grid-gutter) / 2);
}

@media screen and (min-width: 48rem){
  .mod-images-grid > li {
    position: relative;
    flex-basis: calc(100% / var(--col-number));
    max-width: calc(100% / var(--col-number));
  }
}

.mod-images-grid-item{
  position: relative;
  z-index: 0;
  display: block;
  transition: z-index var(--transition-duration-base);
}

.mod-images-grid-image{
  width: 100%;
  aspect-ratio: var(--images-ratio);
  transition: transform var(--transition-duration-base) var(--transition-easing-base);
}

.mod-images-grid-item .image-filter{
  will-change: filter;
  transition: filter var(--transition-duration-base) var(--transition-easing-base);
}

/* Hover */

.mod-images-grid-item:hover{
  z-index: 1;
  transition: z-index 0s;
}

.mod-images-grid-item:hover .mod-images-grid-image{
  transform: scale(1.1);
} 

.mod-images-grid-item:hover .image-filter{
  filter: none;
}