.paragraph--type--timeline-item {
  display: flex;
  gap: 48px;

  & .timeline-decoration {
    flex-shrink: 0;
    flex-basis: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    --timeline-color: color-mix(in srgb, var(--color-mist) 30%, transparent);
    --timeline-width: 3px;
    --timeline-line-radius: calc(var(--timeline-width) / 2);

    & .timeline-decoration__top-line,
    & .timeline-decoration__bottom-line {
      background-color: var(--timeline-color);
      width: var(--timeline-width);
    }

    & .timeline-decoration__top-line {
      flex: 0 0 24px;
      border-radius: 0 0 var(--timeline-line-radius) var(--timeline-line-radius);
    }

    & .timeline-decoration__bottom-line {
      flex-grow: 1;
      border-radius: var(--timeline-line-radius) var(--timeline-line-radius) 0 0;
    }

    & .timeline-decoration__icon {
      width: 40px;
      height: 40px;
      align-content: center;
      background-color: var(--timeline-color);
      border-radius: 50%;
      color: var(--border-tertiary);

      & svg {
        margin: auto;
      }
    }
  }

  & .timeline-content {
    flex-grow: 1;
    padding-top: 12px;
    padding-bottom: 48px;

    & .field--name-field-summary {
      margin-bottom: 16px;
      color: var(--text-secondary);
    }

    & .field--name-field-description {
      margin-bottom: 32px;
    }
  }

  @media (max-width: 768px) {
    gap: 16px;
  }
}
.paragraph--type--timeline {
  margin-top: 44px;
}