.snake-trail{--snake-radius: .55rem;--snake-line-color: rgb(120 186 171);--snake-dot-color: rgba(142, 236, 211, .52);--snake-offset-updown: 3rem;--snake-distance-top: 1.25rem;--snake-distance-bottom: 1.6rem;--snake-distance-side: 2.75rem;--snake-distance-dot: .25rem;--snake-distance-side-offset: calc(var(--snake-radius) * 4);--snake-fade-width: 1px;display:grid;gap:0;padding:0 var(--snake-radius)}.snake-trail>.snake-item{position:relative;border:1px solid var(--snake-line-color);padding:var(--snake-distance-top) var(--snake-distance-side) var(--snake-distance-bottom);margin-bottom:-1px;border-radius:calc(var(--snake-radius) * 4)}.snake-trail>.snake-item:before{content:"";position:absolute;width:calc(var(--snake-radius) * 2 + 1px);height:calc(var(--snake-radius) * 2 + 1px);background:var(--snake-color);border-radius:50%;top:calc(var(--snake-distance-bottom) + var(--snake-distance-dot));box-shadow:0 0 0 6px #56758b38}.snake-trail>.snake-item:first-child{border-top:none;border-top-left-radius:0;margin-top:var(--snake-offset-updown);padding-top:0}.snake-trail>.snake-item:first-child:before{top:var(--snake-distance-dot)}.snake-trail>.snake-item:first-child:after{content:"";position:absolute;top:calc(var(--snake-offset-updown) * -1);height:var(--snake-offset-updown);left:calc(var(--snake-fade-width) * -1);width:var(--snake-fade-width);background:linear-gradient(to bottom,transparent,var(--snake-color))}.snake-trail>.snake-item:nth-child(odd){border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;margin-right:var(--snake-distance-side-offset)}.snake-trail>.snake-item:nth-child(odd):before{left:calc(var(--snake-radius) * -1 - 1px)}.snake-trail>.snake-item:nth-child(2n){border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:var(--snake-distance-side-offset)}.snake-trail>.snake-item:nth-child(2n):before{right:calc(var(--snake-radius) * -1 - 1px)}.snake-trail>.snake-item:last-child{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;margin-bottom:var(--snake-offset-updown)}.snake-trail>.snake-item:last-child:after{content:"";position:absolute;bottom:calc(var(--snake-offset-updown) * -1);height:var(--snake-offset-updown);width:var(--snake-fade-width);background:linear-gradient(to bottom,var(--snake-color),transparent)}.snake-trail>.snake-item:last-child:nth-child(odd):after{left:calc(var(--snake-fade-width) * -1)}.snake-trail>.snake-item:last-child:nth-child(2n):after{right:calc(var(--snake-fade-width) * -1)}.snake-trail.start-right>.snake-item{border:1px solid var(--snake-color);border-radius:calc(var(--snake-radius) * 4)}.snake-trail.start-right>.snake-item:first-child{border-top:none;border-top-right-radius:0}.snake-trail.start-right>.snake-item:first-child:after{left:auto;right:calc(var(--snake-fade-width) * -1)}.snake-trail.start-right>.snake-item:nth-child(odd){border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:var(--snake-distance-side-offset);margin-right:0}.snake-trail.start-right>.snake-item:nth-child(odd):before{left:auto;right:calc(var(--snake-radius) * -1 - 1px)}.snake-trail.start-right>.snake-item:nth-child(2n){border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;margin-left:0;margin-right:var(--snake-distance-side-offset)}.snake-trail.start-right>.snake-item:nth-child(2n):before{left:calc(var(--snake-radius) * -1 - 1px);right:auto}.snake-trail.start-right>.snake-item:last-child{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.snake-trail.start-right>.snake-item:last-child:nth-child(odd):after{left:auto;right:calc(var(--snake-fade-width) * -1)}.snake-trail.start-right>.snake-item:last-child:nth-child(2n):after{left:calc(var(--snake-fade-width) * -1);right:auto}.snake-trail.vertical-only>.snake-item{border:none;border-left:1px solid var(--snake-color);border-radius:0;margin-left:0;margin-right:0}.snake-trail.vertical-only>.snake-item:before{left:calc(var(--snake-radius) * -1 - 1px);right:auto}.snake-trail.vertical-only>.snake-item:first-child{margin-top:var(--snake-offset-updown)}.snake-trail.vertical-only>.snake-item:last-child{margin-bottom:var(--snake-offset-updown)}.snake-trail.vertical-only>.snake-item:last-child:after{left:calc(var(--snake-fade-width) * -1);right:auto}.snake-trail.vertical-only.start-right>.snake-item{border-right:1px solid var(--snake-color);border-left:none}.snake-trail.vertical-only.start-right>.snake-item:before{right:calc(var(--snake-radius) * -1 - 1px);left:auto}.snake-trail.vertical-only.start-right>.snake-item:last-child:after{right:calc(var(--snake-fade-width) * -1);left:auto}@media(max-width:900px){.snake-trail,.snake-trail.vertical-only,.snake-trail.start-right,.snake-trail.vertical-only.start-right{padding-left:.7rem;padding-right:0}.snake-trail>.snake-item,.snake-trail.start-right>.snake-item,.snake-trail.vertical-only>.snake-item,.snake-trail.vertical-only.start-right>.snake-item{border:none;border-left:1px solid var(--snake-color);border-radius:0;margin-left:0;margin-right:0;padding-left:1.5rem;padding-right:0}.snake-trail>.snake-item:before,.snake-trail.start-right>.snake-item:before,.snake-trail.vertical-only>.snake-item:before,.snake-trail.vertical-only.start-right>.snake-item:before{left:calc(var(--snake-radius) * -1 - 1px);right:auto}.snake-trail>.snake-item:first-child:after,.snake-trail.start-right>.snake-item:first-child:after{left:calc(var(--snake-fade-width) * -1);right:auto}.snake-trail>.snake-item:last-child:after,.snake-trail.start-right>.snake-item:last-child:after,.snake-trail.vertical-only>.snake-item:last-child:after,.snake-trail.vertical-only.start-right>.snake-item:last-child:after{left:calc(var(--snake-fade-width) * -1);right:auto}}