/* About Us > History timeline
   One row per year, newest first. BondWave milestones on the left, market events on the right.
   On phones it becomes a single column, in date order within each year, with a tag on each event. */
.tl2{position:relative;max-width:120rem;margin:0 auto 10rem;padding:0 2rem;font-family:"Open Sans",sans-serif}
.tl2::before{content:"";position:absolute;top:5.5rem;bottom:0;left:50%;width:.3rem;margin-left:-.15rem;background:#e5e9ef}
.tl2__head,.tl2__row{display:grid;grid-template-columns:minmax(0,1fr) 11rem minmax(0,1fr)}
.tl2__head{margin-bottom:2rem;font-family:"Titillium Web",sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:.1rem;text-transform:uppercase;color:#7b7474}
.tl2__head-bw{text-align:right}
.tl2__row{position:relative;padding:3rem 0;border-top:1px dashed #e5e9ef}
.tl2__year{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start}
.tl2__year span{background:#fff;padding:.2rem .8rem;font-family:"Titillium Web",sans-serif;font-size:2.8rem;font-weight:700;line-height:1;color:#333}
.tl2__col{display:flex;flex-direction:column;gap:2.4rem;min-width:0}
.tl2__col--bw{text-align:right;padding-right:1rem}
.tl2__col--mk{padding-left:1rem}
.tl2__event{position:relative;max-width:42rem}
.tl2__col--bw .tl2__event{margin-left:auto}
.tl2__event::after{content:"";position:absolute;top:.5rem;width:1rem;height:1rem;border-radius:50%;display:none}
.tl2__event--milestone::after{right:-6.6rem;background:#ab3838}
.tl2__event--market::after{left:-6.6rem;background:#fff;border:.15rem solid #a09f9f;box-sizing:border-box}
.tl2__tag{display:none}
.tl2__date{font-size:1.4rem;font-weight:600;color:#7b7474;margin:0 0 .3rem}
.tl2__title{font-size:1.8rem;font-weight:700;margin:0 0 .5rem;color:#ab3838}
.tl2__event--market .tl2__title{color:#4b4a4a}
.tl2__text{font-size:1.6rem;line-height:2.4rem;margin:0;color:#4b4a4a}
@media (max-width:56.25em){
  .tl2{padding:0 0 0 3rem}
  .tl2::before{left:1rem;top:0}
  .tl2__head{display:none}
  .tl2__row{grid-template-columns:1fr;row-gap:2.4rem;padding:2.4rem 0}
  .tl2__year{order:-1;justify-content:flex-start;margin-bottom:-.8rem}
  /* Merge both columns so a year's events sort by date (each event carries an inline order) */
  .tl2__col{display:contents}
  .tl2__year span{padding-left:0;font-size:2.4rem}
  .tl2__col--bw,.tl2__col--mk{text-align:left;padding:0}
  .tl2__col:empty{display:none}
  .tl2__event{max-width:none;margin-left:0}
  .tl2__col--bw .tl2__event{margin-left:0}
  .tl2__event--milestone::after,.tl2__event--market::after{display:block;left:-2.45rem;right:auto}
  .tl2__tag{display:inline-block;margin-bottom:.6rem;padding:.2rem .8rem;font-size:1.2rem;color:#7b7474;border:.1rem solid #e5e9ef;border-radius:.5rem}
}