.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; }
    .box { border-radius: var(--r); padding: calc(clamp(2rem, 6vw, 4.5rem) * var(--spacing)) calc(clamp(1.25rem, 5vw, 4.5rem) * var(--spacing)); }
    :host([tone=warm]) .box { background: var(--tint); }
    :host([tone=accent]) .box { background: var(--soft); }
    :host(:not([tone])) .box { padding: 0; }
    :host([variant=plain]) .box { background: transparent; border-radius: 0; }
    :host([variant=compact]) .box { padding: 1.5rem; }