body {
  overflow: hidden;
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 0px 0px;
  grid-template-areas:
    "main main main main main main main"
    ". i1 i2 i3 i4 i5 .";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  width: 80vmin;
  border: 2px solid black;
  background-color: black;
}

.gallery {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 80vmin;
  height: 80vmin;
  --pos: 0;
}

.gallery > div {
  overflow: hidden;
  background-color: white;
  width: 20vmin;
  height: 20vmin;
  display: flex;
}

.gallery > div > div {
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
  background-size: 80vmin auto;
  transition: transform 0.5s ease-in-out;
}

@for $i from 0 through 3 {
  .gallery > div:nth-of-type(4n + #{$i + 1}) > div {
    --xpos: #{$i * 20};
  }
  @for $j from 0 through 3 {
    .gallery > div:nth-of-type(#{$j * 4 + $i + 1}) > div {
      --ypos: #{$j * 20};
    }
  }
}

.gallery > div > div {
  background-position: calc(var(--xpos) * -1vmin) calc(var(--ypos) * -1vmin);
}

input {
  margin: 20px;
}

input:nth-of-type(1) {
  grid-area: i1;
}
input:nth-of-type(2) {
  grid-area: i2;
}
input:nth-of-type(3) {
  grid-area: i3;
}
input:nth-of-type(4) {
  grid-area: i4;
}
input:nth-of-type(5) {
  grid-area: i5;
}

@for $i from 0 through 4 {
  input:nth-of-type(#{$i + 1}):checked ~ .gallery {
    --pos: #{$i * 20};
  }
}

.north {
  flex-direction: column;
}

.east {
  flex-direction: row;
}

.south {
  flex-direction: column-reverse;
}

.west {
  flex-direction: row-reverse;
}

.north > div {
  transform: translateY(calc(var(--pos) * -1vmin));
}

.east > div {
  transform: translateX(calc(var(--pos) * -1vmin));
}

.south > div {
  transform: translateY(calc(var(--pos) * 1vmin));
}

.west > div {
  transform: translateX(calc(var(--pos) * 1vmin));
}
