.vtp-story-line{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  margin-top:30px;
  max-width:900px;
}

.vtp-story-line::before{
  content:'';
  position:absolute;
  left:28px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,
    var(--vtp-m, #e0218a),
    var(--vtp-o, #f59f00),
    var(--vtp-y, #ffd43b),
    var(--vtp-p, #7048e8),
    var(--vtp-b, #3b5bdb)
  );
}

.vtp-story-item{
  display:flex;
  gap:36px;
  padding-bottom:52px;
  position:relative;
}
.vtp-story-item:last-child{ padding-bottom:0; }

.vtp-story-node{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #e7e7ee;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  z-index:1;
  box-shadow:0 6px 18px rgba(20,20,43,.08);
}

.vtp-story-node-n{
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg, var(--vtp-m, #e0218a), var(--vtp-p, #7048e8));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.vtp-story-body{ padding-top:10px; }

.vtp-story-yr{
  font-size:11px;
  font-weight:700;
  color:var(--vtp-label-color, #e0218a);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:6px;
}

.vtp-story-t{
  font-size:18px;
  font-weight:800;
  color:var(--vtp-title-color, #1a2238);
  margin-bottom:8px;
}

.vtp-story-d{
  font-size:14.5px;
  color:var(--vtp-desc-color, #6b7280);
  line-height:1.72;
  margin:0;
}

@media (max-width:600px){
  .vtp-story-item{ gap:20px; }
  .vtp-story-line::before{ left:23px; }
  .vtp-story-node{ width:46px; height:46px; }
  .vtp-story-node-n{ font-size:12px; }
}