.scd-flip {
  position: relative; width: 240px; height: 130px; margin: 0 auto;
  display: flex; gap: 4px; perspective: 800px;
  background: #1a1a1a; padding: 8px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}
.scd-flip__c {
  flex: 1; position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3,1,.3,1);
  transition-delay: calc(var(--i) * 0.08s);
}
.scd-flip__f, .scd-flip__b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 3px;
  font: 900 36px/1 ui-monospace, monospace;
  backface-visibility: hidden;
  background: #171717;
  color: #ffb000;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 #2a2a2a;
}
.scd-flip__b { transform: rotateY(180deg); }
.scd-flip__f::after, .scd-flip__b::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 50%; height: 1px;
  background: #000;
}
.scd-flip:hover .scd-flip__c { transform: rotateY(180deg); }