/* Wrapper die alleen dit element centreert */
.face-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 40px 0;
}

/* Container schaalt mee met schermgrootte */
.face-container {
  width: min(90%, 656px);
  aspect-ratio: 656 / 1000;
  position: relative;
  perspective: 1600px;
  padding: 40px;
}

/* Achtergrond achter het gezicht */
.achtergrond {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  left: 0;
  top: 0;
}

/* Paneel basis */
.pane {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
  z-index: 2;
}

/* Linker helft */
.pane.left {
  width: calc(304 / 656 * 100%);
  left: 30px;
  transform-origin: left center;
}

/* Rechter helft */
.pane.right {
  width: calc(352 / 656 * 100%);
  right: 30px;
  transform-origin: right center;
}

/* Voor- en achterkant */
.pane img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}

.pane .back {
  transform: rotateY(180deg);
}

/* Hover animatie */
.face-container:hover .left {
  transform: rotateY(-120deg);
}

.face-container:hover .right {
  transform: rotateY(120deg);
}