odd even et flux

Bonjour à tous,

Je cherche à faire une timeline vertical et responsive, voici comment je procède :

    <div class="timeline-container">

      <div class="date"><span>1976</span></div>

        <div class="timeline-block">
          <div class="marker"></div>
          <div class="timeline-content">
            <h3>Iphigénie</h3>
            <span>Théâtre Essaïon</span>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>

        <div class="timeline-block">
          <div class="marker"></div>
          <div class="timeline-content">
            <h3>l'imitation</h3>
            <span>Théâtre Essaïon</span>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>

        <div class="timeline-block">
          <div class="marker"></div>
          <div class="timeline-content">
            <h3>Third Year</h3>
            <span>Théâtre Essaïon</span>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
          </div>
        </div>
    </div>

et mon css :

.timeline-container {
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.timeline-container:before { 
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 1px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1
}

.date {
  display: flex;
  margin-left: 1px;
  justify-content: center;
  clear: both;
}
.date span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding-right: 3px;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  color:#fff;
}
.timeline-block {
  margin-top: 1.5rem;
  width: calc(50% + 8px);
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  transition: all 1.3 ease-in-out;
}

.timeline-container .timeline-block:nth-of-type(odd) {
  float: right;
  border: 1px solid #000;
}
.timeline-container .timeline-block:nth-of-type(even) {
  float: left;
  direction: rtl;
  border: 1px solid #33ad14;
}

.marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c0c0c0;
  background: #d6d6d6;
  margin-top: 10px;
  z-index: 9999;
  transition: all 1.3 ease-in-out;
}

.timeline-content {
  width: 95%;
  padding: 0 15px;
  color: #666
}
.timeline-content h3 {
  font-family: 'Crimson Text', serif!important;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500
}
.timeline-content span {
  position: relative;
  top: -10px;
  font-size: 13px;
  font-style: italic;
  color: #a4a4a4;
}
.timeline-content p {
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;
}

Ce que je veux

Je souhaite donc afficher la date et ensuite les évenements en quinconce le premier à gauche le deuxième à droite etc

Ce que j'obtiens

J'obtiens bien le résultat voulu, mais quand je rajoute une année le comportement odd/even recommence à zero c'est à dire que le premier élement de ma nouvelle date commence forcement à gauche malgré le ciblage par .timeline-block:nth-of-type().

Y a t'il un moyen d'éviter ce comportement ?

Merci à tous