.timeline {
    --timeline-gutter: 1rem;
    --timeline-line-width: 2px;
    --timeline-dot-size: 1rem;
    --timeline-avatar-size: 2.5rem;
    --timeline-content-width: calc(50% - var(--timeline-gutter));
    --timeline-sidebar-width: 4.5rem;

    position: relative;
    max-width: var(--size-content-4);
    margin-inline: auto;
    padding-block: var(--block-space);
}

/* Timeline central line */
.timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: var(--timeline-line-width);
    background: var(--outline-variant);
    transform: translateX(-50%);
}

.timeline__group {
    position: relative;
    margin-block-end: var(--block-space-double);
}

.timeline__header {
    position: relative;
    z-index: var(--layer-middle);
    margin-block-end: var(--block-space);
    text-align: center;
}

.timeline__header span {
    padding: var(--inline-space-half) var(--inline-space);
    background: var(--layer-surface);
    border-radius: var(--radius-medium);
    color: var(--outline);
    font-size: var(--font-size-body-medium);
}

.timeline__event {
    position: relative;
    display: grid;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
    width: var(--timeline-content-width);
}

.timeline__event::before {
    content: "";
    position: absolute;
    inset-block-start: var(--timeline-sidebar-width);
    width: var(--timeline-dot-size);
    aspect-ratio: 1;
    background: var(--primary);
    border-radius: 50%;
}

/* Left events */
.timeline__event--left {
    margin-inline-end: auto;
    padding-inline-end: var(--timeline-gutter);
}

.timeline__event--left::before {
    inset-inline-end: calc(var(--timeline-dot-size) * -1.5);
}

/* Right events */
.timeline__event--right {
    margin-inline-start: auto;
    padding-inline-start: var(--timeline-gutter);
}

.timeline__event--right::before {
    inset-inline-start: calc(var(--timeline-dot-size) * -1.5);
}

.timeline__event-header {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
}

.timeline__time {
    font-size: var(--font-size-body-small);
    color: var(--outline);
}

.timeline__avatar {
    width: var(--timeline-avatar-size);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.timeline__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline__event-content {
    background: var(--layer-surface);
    padding: var(--inline-space);
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-1);
}

.timeline__project {
    font-size: var(--font-size-body-small);
    color: var(--outline);
    margin-block-end: var(--inline-space-half);
}

.timeline__action h4 {
    margin-block: 0 var(--inline-space-half);
    font-size: var(--font-size-body-large);
}

.timeline__action p {
    margin: 0;
    color: var(--on-surface-variant);
}

/* Mobile layout */
@container timeline (max-width: 768px) {
    .timeline::before {
        inset-inline-start: var(--timeline-sidebar-width);
    }

    .timeline__event {
        width: auto;
        margin-inline-start: calc(var(--timeline-sidebar-width) * 2);
        margin-inline-end: var(--inline-space);
    }

    .timeline__event--left,
    .timeline__event--right {
        padding-inline: 0;
    }

    .timeline__event::before {
        inset-inline-start: calc(var(--timeline-sidebar-width) * -1.5);
    }
}