.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 < 810px){.ribbon-banner-container .ribbon-banner>div:has(p){justify-content:start;padding:24px}.ribbon-banner-container .ribbon-banner>div:has(p) .close{top:1.6em;right:1.6em;transform:translateY(0)}}.ribbon-banner{--bg: initial;background:var(--clr-green-900);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:24px}.ribbon-banner>div>a:first-child{max-width:600px;display:block;justify-content:center;gap:.4em;text-align:center;color:var(--clr-green-400)}@media screen and (max-width: 810px){.ribbon-banner>div>a:first-child{text-align:left}}.ribbon-banner>div>a:first-child:hover b{text-decoration:underline}.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{font-size:16px;line-height:26px;font-weight:700}@media screen and (max-width: 810px){.ribbon-banner>div>a:first-child b{font-size:15px;line-height:24px}}.ribbon-banner>div>a:first-child p{font-size:14px;line-height:22px;font-weight:400}.ribbon-banner>div>a:first-child p i{font-style:italic;font-size:14px}@media screen and (max-width: 810px){.ribbon-banner>div>a:first-child p{font-size:13px;line-height:21px}.ribbon-banner>div>a:first-child p i{font-size:13px}}.ribbon-banner>div>a:first-child p{color:var(--clr-white)}.ribbon-banner>div .close{position:absolute;right:1rem;top:35%;transform:translateY(-50%);color:light-dark(var(--clr-white),var(--clr-metal-950))}.ribbon-banner>div .close:hover{background:#fff3}.ribbon-banner.theme-red{background:var(--clr-destructive-500)}.ribbon-banner.theme-red b{color:var(--clr-destructive-666)}.ribbon-banner.theme-red p{color:var(--clr-white)}