@layer components {
  .phase-illustrated-heading { display: flex; align-items: center; gap: .75rem; }
  .fertility-illustration { display: block; flex: 0 0 auto; object-fit: contain; background: transparent; }
  .care-instruction-content { flex: 1; }
  .journey-step-details summary > .fertility-illustration + span { flex: 1; min-width: 0; }
  .journey-step-completion { display: inline-flex; width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; color: var(--success); }
  .journey-step-completion svg { width: 14px; height: 14px; }
  .journey-step:has(> .journey-step-details > summary > .fertility-illustration) > .journey-step-details > .journey-step-body { padding-left: calc(56px + 1rem); }
  .calendar-row-label.monitoring-row-label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .65rem; }
  .calendar-row-label.illustrated-calendar-label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .65rem; }
  .illustrated-calendar-label > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
  .illustrated-results-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
  .monitoring-row-label > div { min-width: 0; overflow-wrap: anywhere; }
  .illustrated-topic-heading { display: flex; align-items: center; gap: 1rem; }
  .illustrated-article-title { display: flex; align-items: flex-start; gap: 1rem; }
  .illustrated-article-title h1 { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 400px) {
    .illustrated-article-title { flex-direction: column; }
  }
}