.scd-casc { position: relative; width: 220px; height: 200px; margin: 0 auto; cursor: pointer; }
.scd-casc__c {
  position: absolute; left: 50%; bottom: 0;
  width: 200px; height: 56px; margin-left: -100px;
  background: #d4b86a;
  color: #1a1a1a;
  border-radius: 2px 8px 2px 2px;
  padding: 14px 18px 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(calc(var(--i) * -10px));
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-casc__c::before {
  content: '';
  position: absolute; top: -10px; right: 14px;
  width: 56px; height: 12px;
  background: #2a4d3a;
  border-radius: 4px 4px 0 0;
}
.scd-casc:hover .scd-casc__c { transform: translateY(calc(var(--i) * -56px)); }
.scd-casc__c b    { font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.04em; }
.scd-casc__c span { font: 11px/1 system-ui; color: #4a3d20; }