@use 'sprucecss/scss/spruce' as *;

.l-timeline {
  --size: 1.25em;
  --offset: calc(#{config('line-height-base', $typography, false) + 0em} / 6);
  @include layout-stack('l');
  position: relative;

  &::before {
    --inline-size: 0.15em;
    background-color: color('border');
    content: '';
    inline-size: var(--inline-size);
    inset: var(--offset) auto var(--offset) calc(var(--size) / 2 - var(--inline-size) / 2);
    position: absolute;
    z-index: -1;
  }

  &__item {
    display: flex;
    gap: spacer('s');

    &::before {
      background-color: color('primary');
      block-size: var(--size);
      border-radius: config('border-radius-sm', $display);
      content: '';
      display: flex;
      flex-shrink: 0;
      inline-size: var(--size);
      margin-block-start: var(--offset);
    }
  }

  &__content {
    @include layout-stack('s');

    strong {
      color: color('heading');
    }
  }
}

<div class="l-timeline">
    <div class="l-timeline__item">
        <div class="l-timeline__content">
            <p><strong>2023</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim luctus varius. Quisque lorem arcu, eleifend sed diam ut, ultricies tristique ex. Nam mollis massa sed metus faucibus efficitur.</p>
            <p>Pellentesque et sagittis diam. Fusce justo mi, placerat a elit non, viverra venenatis nibh. Suspendisse et finibus velit, ut consectetur ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id auctor tellus.</p>
        </div>
    </div>
    <div class="l-timeline__item">
        <div class="l-timeline__content">
            <p><strong>2022</strong> Nulla facilisi. In hac habitasse platea dictumst. Mauris sed dapibus nunc. Etiam lacinia pharetra mi vitae pulvinar. Ut quis ultricies massa, id malesuada lectus. Donec vel tincidunt quam. Quisque quis aliquet dui. Proin velit elit, faucibus eget ultrices id, sollicitudin eu elit. Maecenas vitae suscipit magna. Fusce non risus lorem. Ut suscipit neque quis eros feugiat fringilla.</p>
        </div>
    </div>
    <div class="l-timeline__item">
        <div class="l-timeline__content">
            <p><strong>2021</strong> Ut scelerisque purus sit amet dolor imperdiet, vitae aliquet dui condimentum. Morbi mattis lobortis neque in tincidunt. Ut consectetur non ante sed convallis. Curabitur ac pulvinar nisl. Morbi sed ligula at neque gravida vulputate at vitae ligula. Morbi ornare maximus elit, sit amet feugiat dolor accumsan id.</p>
            <p>Etiam dictum augue sed massa molestie faucibus. Donec eu mi quis metus cursus molestie. Phasellus tristique erat non purus euismod pellentesque. Ut congue eleifend pellentesque. Proin tincidunt velit in nisl sollicitudin imperdiet. Donec sed varius libero. Vivamus et vehicula ligula, sed euismod justo. Sed non nulla ac nibh faucibus commodo.</p>
        </div>
    </div>
</div>