@layer components{.character{& .character__heading{margin-block-start:var(--space-xs)}& .character__accent{color:var(--color-accent-strong);font-style:italic;font-weight:400}& .character__lead{max-inline-size:var(--measure);margin-block-start:var(--space-m);color:var(--color-text-muted);font-size:var(--size-step-1);& p + p{margin-block-start:var(--space-s)}}& .character__panels{display:grid;gap:var(--space-l);margin-block-start:var(--space-l);@media(min-width:768px){grid-template-columns: 1fr 1fr;}& h3{margin-block-start:var(--space-s)}& p{margin-block-start:var(--space-xs);color:var(--color-text-muted)}}& .character__outro{max-inline-size:var(--measure);margin-block-start:var(--space-l);color:var(--color-text-muted);font-size:var(--size-step-1)}}}