@import url("../../assets/design-systeme.css");
@import url("../../assets/style.css");

.timeline {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--unit) * 3);

  .description {
    display: flex;
    flex-direction: column;

    h3 {
      font-family: "InterDisplay";
      margin-top: 0;
      margin-bottom: 0;
    }

    p {
      margin: 0;
    }
  }
}

article {
  margin-bottom: calc(var(--unit) * 4);
}

@media screen and (max-width: 991px) {
  .marker { display: none; }
}

@media screen and (min-width: 992px) {
  .timeline {
    position: relative;
    margin: 0 auto;
    gap: calc(var(--unit) * 2);

    &::before {
      content: "";
      width: 1px;
      position: absolute;
      top: 0;
      height: 100%;
      left: 50%;
      background: black;
    }

    div {
      display: flex;
      align-items: baseline;

      .marker {
        flex: none;
        position: relative;
        order: 1;
        left: -6px;
      }

      article {
        width: 50%;
        text-align: right;
        margin-bottom: 0;
      }

      &:nth-child(even) {
        flex-direction: row-reverse;

        article { padding-left: 16px; }

        &>* { text-align: left; }

        .marker { left: 6px; }
      }

      &:nth-child(odd) {
        article { padding-right: 16px; }
      }
    }
  }
}

.cv {
  font-family: "InterDisplay";
  font-size: 2em;
  font-weight: 700;
}