.scd-spread {
  position: relative;
  width: 320px; height: 140px; margin: 0 auto;
  background: radial-gradient(ellipse at center, #0d6048 0%, #0a4f3c 100%);
  border-radius: 70px;
  cursor: pointer;
  display: grid; place-items: center;
}
.scd-spread__c {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px ui-monospace, monospace;
  color: #0a0a0a;
  background:
    repeating-conic-gradient(from 0deg, var(--c1) 0deg 15deg, var(--c2) 15deg 30deg);
  border: 3px solid var(--c2);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.45), inset 0 0 0 6px var(--c1), inset 0 0 0 8px var(--c2);
  transform: translateX(calc((var(--i) - 2) * 4px)) translateY(calc(var(--i) * -2px));
  transition: transform .5s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-spread__c:nth-child(1) { --c1: #f8e8c8; --c2: #d4b86a; }
.scd-spread__c:nth-child(2) { --c1: #b91c1c; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(3) { --c1: #1a4d8f; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(4) { --c1: #3d8a4a; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(5) { --c1: #1a1a1a; --c2: #d4a017; color: #d4a017; }
.scd-spread:hover .scd-spread__c {
  transform: translateX(calc((var(--i) - 2) * 56px)) translateY(0);
}