html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#linkWrap {
  display: block;
}

/* FRAME */
#piece {
  position: relative;
  height: 60vh;
  width: calc(60vh * 0.774);
  cursor: pointer;
}

/* FRAME IMAGE */
#frame {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/141041/banksy-frame.png);
  background-size: cover;
}

/* BACKGROUND BEHIND PAINTING (YOUR IMAGE) */
#holder {
  position: absolute;
  top: 15.4%;
  left: 18.9%;
  width: calc(60vh * 0.774 * 0.617);
  height: calc(60vh * 0.69);
  background: url(https://i.ibb.co/Hf42PxRL/IMG-8493.png);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* PAINTING */
#painting {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ORIGINAL (TOP IMAGE BEFORE SHRED) */
#original {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://i.ibb.co/chRt3r1d/IMG-8491.png);
  background-size: cover;
  background-position: center;
}

/* GRID SHREDDER */
#shredded {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2px;
}

/* SHRED STRIPS (SAME IMAGE) */
.shred {
  background: url(https://i.ibb.co/chRt3r1d/IMG-8491.png);
  background-size: cover;
}

/* SLICE POSITIONS */
.shred:nth-child(1) { background-position: 0% 0; }
.shred:nth-child(2) { background-position: 10% 0; }
.shred:nth-child(3) { background-position: 20% 0; }
.shred:nth-child(4) { background-position: 30% 0; }
.shred:nth-child(5) { background-position: 40% 0; }
.shred:nth-child(6) { background-position: 50% 0; }
.shred:nth-child(7) { background-position: 60% 0; }
.shred:nth-child(8) { background-position: 70% 0; }
.shred:nth-child(9) { background-position: 80% 0; }
.shred:nth-child(10){ background-position: 90% 0; }
.shred:nth-child(11){ background-position: 100% 0; }