/* --- Layout & Reset --- */
.uv-polaroid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  box-sizing: border-box;
}

.uv-polaroid-container * {
  box-sizing: border-box;
}

/* --- Stack Container --- */
.uv-polaroid-stack {
  width: 300px;
  max-width: 100%;
  position: relative;
  z-index: 10;
  transition: transform 0.25s ease;
}

/* --- Polaroid Card Base --- */
.uv-polaroid-card {
  position: relative;
  aspect-ratio: 3 / 3.5;
  padding: 15px 15px 60px 15px;
  background-color: #fff;
  border: 4px solid #000;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: 0.15s ease;
  cursor: pointer;
}

/* --- Pseudo Elements (Stack Effect) --- */
.uv-polaroid-card:before,
.uv-polaroid-card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  border: 4px solid #000;
  transform-origin: center center;
  transition: 0.15s ease;
  z-index: -1;
}

/* Default Rotation */
.uv-polaroid-card:before {
  transform: translatey(-2%) rotate(-6deg);
}

.uv-polaroid-card:after {
  transform: translatey(2%) rotate(6deg);
}

/* --- Image Frame --- */
.uv-polaroid-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #eee;
  border: 4px solid #000;
  overflow: hidden;
}

.uv-polaroid-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Hover Animations --- */
.uv-polaroid-stack:hover {
  transform: rotate(5deg);
}

.uv-polaroid-stack:hover .uv-polaroid-card:before {
  transform: translatey(-4%) rotate(-4deg);
}

.uv-polaroid-stack:hover .uv-polaroid-card:after {
  transform: translatey(4%) rotate(4deg);
}