Christmas foldable decoration

<div class="decoration">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;

  background-color: aquamarine;
  display: grid;
  place-items: center;
}

.decoration {
  width: 98%;
  min-width: 600px;
  max-width: 800px;

  perspective: 1200px;
}

.panel {
  width: 24%;
  aspect-ratio: 3 / 4;

  position: relative;
  display: inline-block;
  transform-style: preserve-3d;

  background-repeat: no-repeat;
}

.panel:nth-child(1) {
  background: url(img/cover.jpg);
  background-size: cover;

  transform-origin: 100% center;

  mask-image: url(img/hat-mask.png);
  mask-mode: alpha;
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: 50% 50%;

  translate: 2% 0;
  z-index: 1;

  animation: fold 3s alternate infinite;
  animation-timing-function: ease-in-out;
}

.panel:nth-child(2) {
  background-image: url("img/hat-reversed.png"), linear-gradient(white, white);
  background-size: 175%, auto;
  background-position: 50%;

  transform-origin: 0% center;
  rotate: y -40deg;
}

.panel:nth-child(3) {
  background-image: url("img/hat.png"), linear-gradient(red, red);
  background-size: 175%, auto;
  background-position: 50%;

  transform-origin: 100% center;
  rotate: y 30deg;
  translate: -39% 0px 22px;
}

.panel:nth-child(4) {
  background-image: url("img/snowy-scene.jpg");
  background-size: cover;

  transform-origin: 0% center;
  rotate: y -17deg;
  translate: -44% 0 21px;
}

@keyframes fold {
  80%,
  100% {
    transform: rotateY(140deg);
  }
}