.scd-photo { position: relative; width: 240px; height: 180px; margin: 0 auto; }
.scd-photo > input { display: none; }
.scd-photo__c {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 132px; margin: -66px 0 0 -46px;
  background: #fafaf5;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35);
  transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .4s;
  z-index: calc(10 - var(--i));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.scd-photo__c::before {
  content: '';
  display: block;
  height: 86px;
  background: var(--bg);
}
.scd-photo__num {
  font: 700 9px/1 ui-monospace, monospace;
  color: #1a1a1a; padding: 8px 10px 2px;
  letter-spacing: 0.06em;
}
.scd-photo__nm {
  font: 800 11px/1 system-ui, sans-serif;
  color: #1a1a1a; padding: 0 10px;
  letter-spacing: 0.02em;
}
.scd-photo__c[data-i="0"] { transform: translateX(-78px) translateY(8px) rotate(-12deg); }
.scd-photo__c[data-i="1"] { transform: translateX(-26px) translateY(-4px) rotate(-4deg); }
.scd-photo__c[data-i="2"] { transform: translateX(26px) translateY(-4px) rotate(4deg); }
.scd-photo__c[data-i="3"] { transform: translateX(78px) translateY(8px) rotate(12deg); }
#scd-photo-1:checked ~ [data-i="0"],
#scd-photo-2:checked ~ [data-i="1"],
#scd-photo-3:checked ~ [data-i="2"],
#scd-photo-4:checked ~ [data-i="3"] {
  transform: translate(0, 0) rotate(0) scale(1.08);
  z-index: 20;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5);
}