.pmk-3d-cube-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  perspective: 1000px;
  margin: auto;
}
.pmk-3d-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.pmk-3d-cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pmk-3d-cube .face img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pmk-3d-cube .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--overlay-color, transparent);
  opacity: var(--overlay-opacity, 0);
  top: 0;
  left: 0;
}
.pmk-3d-cube .text {
  color: white;
  z-index: 2;
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem;
}