@container empty_state (width < 1200px){main{--_padding: 3.5rem !important;--z-grid--columns-width: 50px !important}}@container empty_state (width < 992px){main{--z-grid--columns-width: 30px !important}main>h3{font:var(--zf-h-32)!important}main>p{font:var(--zf-body-18--300)!important}}@container empty_state (width < 768px){main{--_padding: 2rem !important;--z-grid--columns-width: 1fr !important;--z-grid--columns: 6 !important;min-width:calc(100% - 3.75rem)!important}main>h3{font:var(--zf-h-30)!important}}section[z-empty-state]{container:empty_state/inline-size;display:grid;place-items:center;text-align:center;background:var(--z-empty-state--bg, var(--z-sf-brand))!important;color:var(--z-empty-state--color, var(--z-ct-primary))!important;width:100%;gap:var(--zs-200)}:where(section[z-empty-state],*[z-theme=light] section[z-empty-state],section[z-empty-state][z-theme=light]){--_padding: 4rem}section[z-empty-state] [pictogram],section[z-empty-state] z-image,section[z-empty-state] [z-image]{padding-top:var(--_padding)}section[z-empty-state] main{width:calc(var(--z-grid--columns-width) * var(--z-grid--columns) + var(--z-grid--columns-gutter) * (var(--z-grid--columns) - 1));padding-bottom:var(--_padding)}section[z-empty-state] main>h3{font:var(--zf-h-44);margin:0}section[z-empty-state] main>p{font:var(--zf-body-20--300);text-wrap:wrap}section[z-empty-state] main>button{display:inline-block}section[z-empty-state]:not(:has(>:is([pictogram],z-image,[z-image]))) main{padding-top:var(--_padding)}