.publication-timeline__slide {
  background-color: var(--fca-grey-light);
  border: 0.3rem solid var(--consumers-foundation);
  margin-block: var(--spacing);
  text-align: center;
}

.publication-timeline .publication-timeline__slide:last-of-type {
  margin-bottom: var(--spacing); /* Specificity needed to override the margin-bottom set in the ul */
}

.publication-timeline__slide.in-progress {
  background-color: var(--fca-aqua-100);
}

.publication-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.publication-timeline__heading {
  padding: var(--spacing-2);
}

.publication-timeline__date,
.in-progress-text {
  color: var(--fca-grey-dark);
  background-color: var(--fca-white);
  margin-top: auto;
  margin-bottom: 0;
}

.in-progress-text {
  color: var(--consumers-foundation);
  font-weight: bold;
}

@media (min-width: 768px) {
  /* Triangle for the step indicator */
  .publication-timeline__slide:not(:last-of-type) .publication-timeline__step::after {
    content: "";
    display: block;
    position: absolute;
    right: -1rem;
    top: 3.2rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.2rem 0 1.2rem 1.2rem;
    border-color: transparent transparent transparent var(--fca-grey-light);
  }

  /* Triangle for active step indicator */
  .publication-timeline__slide.in-progress .publication-timeline__step::after {
    border-color: transparent transparent transparent var(--fca-aqua-100);
  }
}