.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(2rem, 6vw, 4rem) * var(--spacing)) 0; }
    .card { box-shadow: var(--card-shadow); box-sizing: border-box; max-width: 40rem; margin: 0 auto; padding: calc(clamp(1.4rem, 5vw, 2.6rem) * var(--spacing)); background: var(--tint); border-radius: var(--r); }
    :host([wide]) .card { max-width: 50rem; }
    .icon { width: 54px; height: 54px; border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(1.5rem * var(--type-scale)); font-weight: 800;
      margin-bottom: calc(1.1rem * var(--spacing)); background: var(--soft); color: var(--green-deep); }
    .icon.warn { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }