html, body, .stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  user-select: none;
}

/* This is the 3D 'World' */
.stage {
  perspective: 2000px; 
  transform-style: preserve-3d;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.container {
  perspective: 2000px;
  width: 225px; /* Proportional width for 9:16 */
  height: 400px; /* Proportional height */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ring {
  width: 100%;
  height: 100%;
}

.img {
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  /* This adds a professional reflection that fills the black space below */
  -webkit-box-reflect: below 10px linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
}