.wrap { box-sizing: border-box; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) * var(--spacing)); }

    :host { display: block; padding: calc(clamp(.5rem, 1.5vw, 1rem) * var(--spacing)) 0 calc(clamp(2.5rem, 6vw, 4rem) * var(--spacing)); }
    .box { border-radius: var(--r); padding: calc(clamp(2.5rem, 7vw, 4.5rem) * var(--spacing)) calc(var(--space-6) * var(--spacing)); text-align: center; color: var(--on-slate); background: var(--slate); }
    ::slotted(h2) { color: var(--on-slate) !important; }
    ::slotted(p) { color: color-mix(in srgb, var(--on-slate) 85%, transparent) !important; margin: 0 auto calc(1.75rem * var(--spacing)) !important; max-width: 34rem; }
    :host([variant=inline]) .box { text-align: start; padding: 2rem; }
    :host([variant=inline]) ::slotted(p) { margin-inline: 0 !important; }
    :host([variant=plain]) .box { background: var(--soft); color: var(--ink); }
    :host([variant=plain]) ::slotted(h2), :host([variant=plain]) ::slotted(p) { color: var(--ink) !important; }