.bci-container {
  max-width: 722px;
}

.event {
  border: solid 3px #41403E;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.bci-timeline li:nth-child(odd) > div {
  margin-right: 0;
}

.bci-timeline li:nth-child(odd) img {
  left: initial;
  right: 0;
  transform: rotateZ(-28deg);
}

.bci-timeline li:nth-child(odd) .event-card:hover img {
  transform: rotateZ(0);
}

.bci-timeline li:nth-child(even) > div {
  margin-left: 0;
}

.bci-timeline li:nth-child(odd) > div:first-child {
  order: 3;
}

.bci-timeline li:nth-child(odd) > div:nth-child(2) {
  order: 2;
}

.bci-timeline li:nth-child(odd) .connector {
  position: absolute;
  bottom: -53px;
  height: 53px;
  width: 36px;
  border-right: solid 2px black;
  border-bottom: solid 2px black;
  left: -28px;
  border-bottom-right-radius: 100%;
  margin-right: 0;
}

.bci-timeline li:nth-child(even) .connector {
  position: absolute;
  bottom: -46px;
  height: 54px;
  width: 29px;
  border-left: solid 2px black;
  border-bottom: solid 2px black;
  right: -28px;
  border-bottom-left-radius: 79%;
  margin-left: 0;
}

.opposite {
  border: solid transparent;
}

.event-card > img {
  transform: scaleX(-1) rotateZ(-28deg);
  transition: transform .2s ease-out;
}

.event-card:hover > img {
  transform: scaleX(-1);
}

.event-date {
  background-color: #7982bb;
}

.event-title {
  background-color: #b1bce0;
}