.picture-stack {
  display: grid;
  grid: [stack] 1fr / [stack] 1fr;
}

.picture-stack > * {
  grid-area: stack;
  position: relative;
  transform: scale(0.9);
}

/********************************
       Stack with 2 images
*********************************/
.picture-stack--stack-size-1 .picture-stack__picture:nth-of-type(1) {
  z-index: 3;
  top: 1.8rem;
  left: 0.4rem;
}

.picture-stack--stack-size-1 .picture-stack__picture:nth-of-type(1) img {
  width: 480px;
  height: 360px;
}

/********************************
       Stack with 2 images
*********************************/
.picture-stack--stack-size-2 .picture-stack__picture:nth-of-type(1) {
  z-index: 3;
  top: 7.4rem;
  left: 9.6rem;
}

.picture-stack--stack-size-2 .picture-stack__picture:nth-of-type(1) img {
  width: 360px;
  height: 270px;
}

.picture-stack--stack-size-2 .picture-stack__picture:nth-of-type(2) {
  z-index: 1;
  top: -0.6rem;
  left: 0;
}

.picture-stack--stack-size-2 .picture-stack__picture:nth-of-type(2) img {
  width: 320px;
  height: 240px;
}

/********************************
       Stack with 3 images
*********************************/
.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(1) {
  z-index: 3;
  top: 7.4rem;
  left: 2.6rem;
}

.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(1) img {
  width: 360px;
  height: 270px;
}

.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(2) {
  z-index: 1;
  top: 0;
  left: 0;
}

.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(2) img {
  width: 280px;
  height: 210px;
}

.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(3) {
  z-index: 2;
  left: 14rem;
  top: 2.6rem;
}

.picture-stack--stack-size-3 .picture-stack__picture:nth-of-type(3)  img {
  width: 320px;
  height: 240px;
}