.scd-pers {
  position: relative; width: 200px; height: 150px; margin: 0 auto;
  perspective: 1000px; transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.3,1,.3,1);
}
.scd-pers__c {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 78%, #f5e8c4 78%, #f5e8c4 100%),
    linear-gradient(135deg, #5a1a1a 0%, #3a0a0a 100%);
  color: #c9a233;
  border-radius: 2px 6px 6px 2px;
  display: flex; align-items: center; padding: 0 18px;
  font: 700 14px ui-serif, Georgia;
  box-shadow: 0 8px 22px -8px rgba(90,26,26,0.55), inset 0 0 0 1px rgba(201,162,51,0.2);
  transform: translateZ(calc(var(--i) * -30px)) translateY(calc(var(--i) * -8px));
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  z-index: calc(10 - var(--i));
}
.scd-pers__title {
  border-top: 1px solid #c9a233;
  border-bottom: 1px solid #c9a233;
  padding: 6px 0;
  letter-spacing: 0.16em;
}
.scd-pers:hover { transform: rotateX(-12deg) rotateY(8deg); }