body {
  margin: 0;
  --wall-width: 1280px;
  --wall-height: 1800px;
  --single-image-width: calc(var(--wall-width) / 3);
  --single-image-height: calc(var(--wall-height) / 3);
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-mask {
  /* background: black; */
  width: var(--wall-width);
  height: var(--wall-height);
  overflow: hidden;
}
.image-grid {
  --rows: 3;
  --columns: 3;
  width: var(--wall-width);
  height: var(--wall-height);
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(100% / var(--columns)) calc(100% / var(--columns)) calc(100% / var(--columns));
  grid-template-rows: calc(100% / var(--rows)) calc(100% / var(--rows)) calc(100% / var(--rows));
  transition: transform 1.25s ease-in-out;
}
.image-grid__image {
  width: var(--single-image-width);
  height: var(--single-image-height);
  object-fit: cover;
  /*transition: opacity 1s ease-in-out;
  opacity: 1;*/
}

.image-grid__image--1 {
  grid-row: 1;
  grid-column: 1;
}
.image-grid__image--2 {
  grid-row: 1;
  grid-column: 2;
}
.image-grid__image--3 {
  grid-row: 1;
  grid-column: 3;
}
.image-grid__image--4 {
  grid-row: 2;
  grid-column: 1;
}
.image-grid__image--5 {
  grid-row: 2;
  grid-column: 2;
}
.image-grid__image--6 {
  grid-row: 2;
  grid-column: 3;
}
.image-grid__image--7 {
  grid-row: 3;
  grid-column: 1;
}
.image-grid__image--8 {
  grid-row: 3;
  grid-column: 2;
}
.image-grid__image--9 {
  grid-row: 3;
  grid-column: 3;
}

.image-grid__image--hidden {
  opacity: 0;
}
.image-grid--1by1--1 { transform: translate(calc(3 * var(--single-image-width)), calc(3 * var(--single-image-height))) scale(3); }
.image-grid--1by1--2 { transform: translate(0px, calc(3 * var(--single-image-height))) scale(3); }
.image-grid--1by1--3 { transform: translate(calc(-3 * var(--single-image-width)), calc(3 * var(--single-image-height))) scale(3); }
.image-grid--1by1--4 { transform: translate(calc(3 * var(--single-image-width)), 0px) scale(3); }
.image-grid--1by1--5 { transform: scale(3); }
.image-grid--1by1--6 { transform: translate(calc(-3 * var(--single-image-width)), 0px) scale(3); }
.image-grid--1by1--7 { transform: translate(calc(3 * var(--single-image-width)), calc(-3 * var(--single-image-height))) scale(3); }
.image-grid--1by1--8 { transform: translate(0px, calc(-3 * var(--single-image-height))) scale(3); }
.image-grid--1by1--9 { transform: translate(calc(-3 * var(--single-image-width)), calc(-3 * var(--single-image-height))) scale(3); }

.image-grid--2by2--1245 {
  transform: translate(calc(0.75 * var(--single-image-width)), calc(0.75 * var(--single-image-height))) scale(1.5);
}
.image-grid--2by2--2356 {
  transform: translate(calc(-0.75 * var(--single-image-width)), calc(0.75 * var(--single-image-height))) scale(1.5);
}
.image-grid--2by2--4578 {
  transform: translate(calc(0.75 * var(--single-image-width)), calc(-0.75 * var(--single-image-height))) scale(1.5);
}
.image-grid--2by2--5689 {
  transform: translate(calc(-0.75 * var(--single-image-width)), calc(-0.75 * var(--single-image-height))) scale(1.5);
}