.timeline { border-left: 1px solid var(--line); margin-left: 7px; padding-left: 32px; }
.timeline-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 190px; padding-bottom: 36px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { margin-bottom: 0; padding-bottom: 0; border: 0; }
.timeline-item::before { content: ''; position: absolute; left: -38px; top: 8px; height: 9px; width: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--bg); }
.timeline-date { grid-column: 2; grid-row: 1 / 3; text-align: right; color: var(--muted); font-size: 12px; padding-top: 4px; }
.timeline-item h3 { grid-column: 1; margin-bottom: 8px; }
.timeline-item h4 { grid-column: 1; font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 14px; }
.timeline-item p { grid-column: 1 / -1; color: var(--muted); max-width: 700px; font-size: 15px; }
@media (max-width: 640px) { .timeline { padding-left: 24px; } .timeline-item { display: block; } .timeline-item::before { left: -30px; } .timeline-date { display: block; text-align: left; margin-bottom: 12px; } }