@layer components {
  .care-medication-video-link { display: flex; align-items: center; gap: .5rem; min-height: 48px; width: fit-content; max-width: 100%; margin-top: 1rem; padding: .5rem .9rem; font-size: .875rem; white-space: normal; text-align: start; }
  .care-medication-video-link svg { flex: 0 0 20px; width: 20px; height: 20px; }
  .care-medication-video-link:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; border-radius: 8px; }
  .medication-video { max-width: 960px; margin-inline: auto; padding-block: 1rem 2rem; }
  .medication-video h1 { margin-bottom: 1.25rem; font-size: 1.6rem; line-height: 1.25; }
  .medication-video video { display: block; width: 100%; aspect-ratio: 848 / 480; border-radius: 12px; background: var(--navy); }
  .medication-video-note { margin-top: 1rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
  .medication-video-error { margin-top: 1rem; color: var(--warning-ink); }
  .medication-video-error .button { min-height: 48px; margin-top: .75rem; }
}