/* Professional Persian typography and a collision-proof experience timeline. */
body[lang="fa"] .hero h1{
  font-family:var(--font-fa);
  line-height:1.2;
  direction:rtl;
}

.timeline-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  column-gap:18px;
  position:relative;
}

.timeline-marker{
  position:static;
  grid-column:2;
  grid-row:1 / span 3;
}

.timeline-head,
.timeline-item > p,
.timeline ul{
  grid-column:1;
  min-width:0;
}

.timeline-head,
.timeline-item > p,
.timeline ul{
  padding-inline-end:0;
}

[dir="ltr"] .timeline-item{
  grid-template-columns:52px minmax(0,1fr);
}

[dir="ltr"] .timeline-marker{grid-column:1}

[dir="ltr"] .timeline-head,
[dir="ltr"] .timeline-item > p,
[dir="ltr"] .timeline ul{grid-column:2}

@media (max-width:800px){
  .timeline-item{grid-template-columns:minmax(0,1fr) 44px;column-gap:14px}
  [dir="ltr"] .timeline-item{grid-template-columns:44px minmax(0,1fr)}
}