/* Basic layout */
.p3d-carousel { position: relative; width: 100%; height: 80vh; overflow: hidden; }
.p3d-stage { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.p3d-ring { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%); }

.p3d-item {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  translate: -50% -50%;
  width: 360px; height: 480px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  border-radius: 16px; overflow: hidden;
  background: #111;
  will-change: transform;
}

.p3d-item a { display:block; width:100%; height:100%; color: inherit; text-decoration: none; }

.p3d-media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.05); }
.p3d-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px; background: linear-gradient(transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.75));
  color: #fff;
}
.p3d-title { font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.p3d-subtitle { opacity: .9; font-size: .9rem; margin-top: .25rem; }

/* Responsiveness */
@media (max-width: 767px){
  .p3d-carousel{ height: 70vh; }
}