.article .ride-direction-diagram {
  margin: 1.5rem 0;
}

.article .ride-direction-diagram__leg {
  padding: 1rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: 0.75rem;
  margin-block-end: 0.75rem;
  break-inside: avoid;
}

.article .ride-direction-diagram__leg p {
  margin: 0.5rem 0;
}

.article .ride-direction-diagram__road {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.75rem;
  text-align: center;
}

.article .ride-direction-diagram__arrow {
  /* Keep direction symbols out of locale-specific script fonts. */
  font-family: Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.article .ride-direction-diagram figcaption {
  font-size: 0.9em;
  line-height: 1.5;
}

@media print {
  .article .ride-direction-diagram__leg {
    padding: 3mm;
    border-color: #000;
    border-radius: 0;
  }
}