.ribbon-banner-container{container:ribbon-banner / inline-size;width:100%}@container ribbon-banner (width < 980px){.ribbon-banner-container [lg]{display:none}}@container ribbon-banner (width < 560px){.ribbon-banner-container .ribbon-banner>div:has(p){justify-content:start;padding:1.6em}.ribbon-banner-container .ribbon-banner>div:has(p)>a:first-child{justify-content:start;justify-items:start}.ribbon-banner-container .ribbon-banner>div:has(p) .close{top:1.6em;right:1.6em;transform:translateY(0)}}.ribbon-banner{--bg: initial;background:light-dark(var(--bg, var(--clr-green-950), var(--clr-green-400)));display:grid;place-items:center}.ribbon-banner>div{position:relative;width:100%;max-width:128em;min-height:7rem;display:flex;flex-direction:row;place-items:center;place-content:center;gap:.8em;padding:1.4em 1em}.ribbon-banner>div>a:first-child{max-width:600px;display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;color:light-dark(var(--clr-white),var(--clr-metal-950))}.ribbon-banner>div>a:first-child:not([href]){cursor:default}.ribbon-banner>div>a:first-child .emoji{font-size:2rem}.ribbon-banner>div>a:first-child b,.ribbon-banner>div>a:first-child p{font-size:1.6rem;line-height:1.8em}.ribbon-banner>div>a:first-child p{color:var(--clr-green-300)}.ribbon-banner>div .close{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:light-dark(var(--clr-white),var(--clr-metal-950))}.ribbon-banner>div .close:hover{background:#fff3}.ribbon-banner.theme-red{--bg: var(--clr-destructive-400)}.ribbon-banner.theme-red p{color:#fff;opacity:.85}