article-timeline.pcss

.article-timeline-grid {
  @apply grid gap-2;

  margin-top: -20px;

  grid-template-areas:
    "left-article"
    "right-article";

  @screen xl {
    grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
    grid-template-areas: "left-article timeline right-article";
  }
}

.article-timeline-grid__left-article {
  grid-area: left-article;
}

.article-timeline-grid__right-article {
  grid-area: right-article;
}

.article-timeline-grid__timeline {
  grid-area: timeline;

  &:before {
    content: '';
    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
    position: absolute;
    bottom: -1px;
    height: 20px;
    z-index: 10;
    width: 2px;
    left: -1px;
  }

  .article-timeline--month {
    transform: translateX(-50%);
    top: -1rem;
    z-index: 100;
  }
}