@layer sections {
#patients { padding: var(--space-1) 0; overflow-x: clip; }
#patients .pt-pin { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(28px, 4vw, 56px); }
#patients .pt-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
#patients .pt-head .m-text-2 { max-width: 10ch; }
#patients .pt-head .m-text { max-width: 40ch; }
#patients .pt-viewport { min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
#patients .pt-track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding: 24px var(--space-2) 40px; }
#patients .pt-card { flex: none; display: grid; align-content: start; gap: 14px; width: clamp(240px, 22vw, 300px); scroll-snap-align: center; }
#patients .pt-frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-1); background: var(--color-3); }
#patients .pt-card:nth-child(3n + 1) .pt-frame { border-radius: var(--radius-1) var(--radius-4) var(--radius-1) var(--radius-1); }
#patients .pt-card:nth-child(3n + 2) .pt-frame { border-radius: 999px 999px var(--radius-1) var(--radius-1); }
#patients .pt-card:nth-child(3n + 3) .pt-frame { border-radius: var(--radius-1) var(--radius-1) var(--radius-4) var(--radius-1); }
#patients .pt-frame img { width: 100%; height: 100%; object-fit: cover; }
#patients .pt-body { display: grid; gap: 6px; }
#patients .pt-body .m-text { font-size: 16px; }
#patients .pt-meta { display: flex; align-items: baseline; gap: 10px; }
@media (max-width: 720px) {
  #patients .pt-card { width: 72vw; }
}
}