<div class="acc-vyl">
  <input type="radio" name="vyl" id="vyl-1" />
  <input type="radio" name="vyl" id="vyl-2" checked />
  <input type="radio" name="vyl" id="vyl-3" />
  <input type="radio" name="vyl" id="vyl-4" />
  <label for="vyl-1" class="acc-vyl__r" style="--c: #9c7bd6"><span>SIDE A · Echoes</span></label>
  <label for="vyl-2" class="acc-vyl__r" style="--c: #d49a5c"><span>SIDE B · Static</span></label>
  <label for="vyl-3" class="acc-vyl__r" style="--c: #8fb3a3"><span>SIDE C · Drift</span></label>
  <label for="vyl-4" class="acc-vyl__r" style="--c: #c8a2c8"><span>SIDE D · Hum</span></label>
</div>

.acc-vyl {
  display: flex; gap: 5px; padding: 16px;
  height: 220px; align-items: stretch;
  background: linear-gradient(180deg,#15151d,#1a1a24);
  border-radius: 12px;
}
.acc-vyl > input { display: none; }
.acc-vyl__r {
  flex: 0 0 22px; cursor: pointer; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c), black 35%), var(--c) 50%, color-mix(in srgb, var(--c), black 35%));
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  transition: flex .45s cubic-bezier(.3,1,.3,1);
  display: flex; align-items: center; justify-content: center;
}
.acc-vyl__r span {
  font: 700 10px/1 system-ui; letter-spacing: 0.14em;
  color: rgba(0,0,0,0.7); white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
#vyl-1:checked ~ [for="vyl-1"],
#vyl-2:checked ~ [for="vyl-2"],
#vyl-3:checked ~ [for="vyl-3"],
#vyl-4:checked ~ [for="vyl-4"] { flex: 1 1 0; }
#vyl-1:checked ~ [for="vyl-1"] span,
#vyl-2:checked ~ [for="vyl-2"] span,
#vyl-3:checked ~ [for="vyl-3"] span,
#vyl-4:checked ~ [for="vyl-4"] span {
  writing-mode: horizontal-tb; transform: none; font-size: 13px;
  color: rgba(0,0,0,0.85);
}