@layer components {
  .rs-timeline {
    display: grid;
    gap: var(--rs-unit-x1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .rs-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--rs-unit-x6) 1fr;
    gap: var(--rs-unit-x3);
    padding-block-end: var(--rs-unit-x4);
  }

  .rs-timeline__item:last-child {
    padding-block-end: 0;
  }

  .rs-timeline__marker {
    position: relative;
    display: grid;
    place-items: start center;
  }

  .rs-timeline__marker::before {
    content: "";
    inline-size: var(--rs-unit-x2);
    block-size: var(--rs-unit-x2);
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-border-neutral);
    margin-block-start: calc(var(--rs-unit-x2) / 2);
  }

  .rs-timeline__marker::after {
    content: "";
    position: absolute;
    inset-block-start: var(--rs-unit-x4);
    inset-block-end: calc(var(--rs-unit-x4) * -1);
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--rs-color-border-neutral);
    transform: translateX(-50%);
  }

  .rs-timeline__item:last-child .rs-timeline__marker::after {
    content: none;
  }
}