<ul class="timeline">
  <li class="job" webc:for="job of jobs">
    <icon class="icon" :icon="job.icon"></icon>
    <p class="title" @text="job.title"></p>
    <p class="text" @text="job.desc"></p>
  </li>
</ul>

<style>
  .timeline {
    --timeline-circle-size: 3rem;
    --timeline-circle-background: var(--clr-box-background);
    --timeline-stroke-color: var(--clr-timeline-stroke);
    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);

    margin-block: 1em;
    padding: 0;

    @media (min-width: 32em) {
      --timeline-circle-size: 4rem;
    }

    & .job {
      display: grid;
      grid-template-areas:
        'icon title'
        'line text';
      column-gap: 1em;

      &::before {
        content: '';

        grid-row: icon / line;
        grid-column: line;
        justify-self: center;

        width: var(--timeline-stroke-thickness);
        height: 100%;

        background-color: var(--timeline-stroke-color);
      }

      &:first-child::before {
        align-self: end;
        height: calc(100% - var(--timeline-circle-size));
      }

      &:last-child::before {
        grid-row: icon;
        align-self: start;
        height: 50%;
      }
    }

    & .icon {
      grid-area: icon;
      align-self: center;

      width: var(--timeline-circle-size);
      height: var(--timeline-circle-size);

      background-color: var(--timeline-circle-background);

      border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
      border-radius: 100%;
      padding: calc(var(--timeline-circle-size) * 0.2);
    }

    & .title {
      grid-area: title;
      align-self: center;

      font-family: var(--font-family-headings);
      font-size: calc(var(--timeline-circle-size) / 2);
      font-weight: bold;
      text-align: start;
      margin-block: calc(var(--timeline-circle-size) / 4);
    }

    & .text {
      grid-area: text;

      margin-inline: 0;
      margin-block: 0;
      line-height: 1.5;
      text-align: justify;
    }
  }
</style>
