/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
  .timeline-container::after {
    left: var(--mobile-timeline-offset);
  }

  .timeline-event {
    width: 100%;
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-lg);
  }

  .timeline-event.left, 
  .timeline-event.right {
    left: 0;
  }
  
  .timeline-event.left::after, 
  .timeline-event.right::after {
    left: var(--mobile-arrow-offset);
    border-width: var(--timeline-arrow-size) var(--timeline-arrow-size) var(--timeline-arrow-size) 0;
    border-color: transparent var(--white) transparent transparent;
  }

  .timeline-marker {
    left: var(--mobile-timeline-offset);
  }
}