/* =============================================================================
   Timeline
   ========================================================================== */

.timeline {
  position: relative;
}

.timeline__item {
  text-align: left;
}

.timeline__box {
  position: relative;
  margin-bottom: 2em;
  padding: 1.5em 2em;
  background: rgb(var(--c-neutral-lighter));
}

.timeline__item:last-of-type .timeline__box {
  margin-bottom: 0;
}

.content > .frame:nth-child(2n) .timeline__box {
  background: rgb(var(--c-neutral-lightest));
}

.timeline__date {
  display: inline-block;
  font-size: 112%;
  font-weight: var(--f-weight-b);
  line-height: 1.4;
  text-transform: uppercase;
  color: rgb(var(--c-neutral-darker));
}

.timeline__title {
  margin-bottom: 1em;
  color: rgb(var(--c-primary));
}

.timeline__content p {
  line-height: 1.6;
}

.timeline__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 1em;
}

.timeline__line,
.timeline__circle {
  display: none;
}

@media (min-width: 641px) {
  .timeline__box {
    padding: 32px 48px;
  }
}

@media (min-width: 901px) {
  .timeline.-positioned .timeline__item {
    position: absolute;
    width: 48%;
    margin-top: 10px;
  }

  .timeline.-positioned .timeline__item.-left {
    left: 0;
    text-align: right;
  }

  .timeline.-positioned .timeline__item.-right {
    left: 52%;
  }

  .timeline.-positioned .timeline__item.-left .timeline__image {
    margin-left: auto;
  }

  .timeline__box,
  .timeline__item:last-of-type .timeline__box {
    margin-bottom: 48px;
  }

  .timeline.-positioned .timeline__box::after {
    content: '';
    position: absolute;
    top: 0;
    width: 25px;
    height: 15px;
    background: inherit;
  }

  .timeline.-positioned .timeline__item.-left .timeline__box::after {
    right: -24px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
  }

  .timeline.-positioned .timeline__item.-right .timeline__box::after {
    left: -24px;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
  }

  .timeline.-positioned .timeline__line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #d7d7d7;
  }

  .timeline.-positioned .timeline__circle {
    display: block;
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -4px;
    border-radius: 5px;
    background: rgb(var(--c-secondary));
  }
}