.procedure-steps{position:relative;list-style:none;padding-left:0;margin:0 0 40px 0}
.procedure-steps::after{content:'';position:absolute;left:269px;top:0;bottom:0;width:2px;background-color:#f1f1f1;z-index:0}
.procedure-step{position:relative;padding:1.25rem;border:1px solid #f1f1f1;border-radius:.75rem;margin-bottom:1rem;background-color:#fff}
.procedure-step::after{content:attr(data-step);position:absolute;top:35%;left:-2.5rem;transform:translateY(-50%);font-size:4rem;font-weight:700;color:#e60680;z-index:0;pointer-events:none;user-select:none;line-height:1;opacity:.1}
.procedure-step-header{margin-bottom:1rem}
.procedure-step-name{font-size:20px;font-weight:500;color:#000;position:relative;padding-left:1em}
.procedure-step-name::before{content:'>';position:absolute;left:0;top:0;color:#e60680;font-weight:700;opacity:.5}
.procedure-step-body{position:relative;padding-left:2rem;display:flex;flex-direction:column;justify-content:center}
.procedure-step-body::before{content:'';position:absolute;top:50px;transform:translateY(-50%);left:10px;width:.5rem;height:.5rem;background-color:#e60680;border-radius:9999px;box-shadow:0 0 0 4px rgba(230,6,128,.3);z-index:1}
.procedure-step-title{font-size:18px;font-weight:400;color:#000;margin:0 0 5px 0}
.procedure-step-time{font-size:12px;color:var(--color-theme,#999);white-space:nowrap;margin:0 0 0 20px}
.procedure-step-description{font-weight:300;margin:0}
@media (min-width:768px){
  .procedure-step{display:flex;padding:0;border:none;border-radius:0}
  .procedure-step-header{width:16rem;padding:1.25rem}
  .procedure-step-body{flex:1;padding:1.25rem 1.25rem 1.25rem 6rem}
}
@media (max-width:768px){
  .procedure-steps::after,.procedure-step-body::before{display:none}
  .procedure-step::after{left:auto;right:1rem;bottom:1rem;top:auto;transform:none;font-size:2rem;opacity:.3}
}