wp-component[name=PromoBanner]{margin-block-end:var(--spacing-non-scalable-xl)}wp-component[name=PromoBanner] .content-wrapper{--bg-color: var(--surface-neutral-soft);--text-color: var(--on-surface-text-primary-base);align-items:center;background:var(--bg-color);border-radius:var(--radius-non-scalable-s);border:1px solid var(--border-neutral-light);display:grid;gap:var(--spacing-non-scalable-m);grid-column:1/-1;justify-content:center;min-height:150px;padding:var(--spacing-non-scalable-m);position:relative}@media screen and (min-width: 640px){wp-component[name=PromoBanner] .content-wrapper{grid-auto-flow:column;grid-template-columns:auto 1fr auto;justify-content:start}}wp-component[name=PromoBanner] .content-wrapper .button-wrapper{align-self:center;inline-size:100%;justify-self:end}@media screen and (min-width: 640px){wp-component[name=PromoBanner] .content-wrapper .button-wrapper{inline-size:fit-content}}wp-component[name=PromoBanner] .content-wrapper .image-content{padding-inline:4px;margin-inline:auto}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge{inset:auto;position:relative}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle{--circle-size: 108px;--outer-circle-border: 4px;font-size:var(--font-body-xs-size);line-height:var(--font-body-xs-line-height);line-height:var(--font-body-xs-tracking)}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle>.wrapper{padding:10px 8px;gap:6px}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle>.wrapper>.discount{font-size:var(--font-heading-l-size);line-height:var(--font-heading-l-line-height);line-height:28px}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle>.wrapper>.discount--decimal{font-size:var(--font-heading-s-size)}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle>.wrapper>.code{padding:2px}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle>.wrapper .addon-description{text-align:center}wp-component[name=PromoBanner] .content-wrapper .image-content .promo-badge .circle .outer-circle{top:-4px;right:-4px;bottom:-4px;left:-4px}wp-component[name=PromoBanner] .content-wrapper .text-content{inline-size:100%;color:var(--text-color)}wp-component[name=PromoBanner] .content-wrapper .text-content h2,wp-component[name=PromoBanner] .content-wrapper .text-content h3,wp-component[name=PromoBanner] .content-wrapper .text-content h4,wp-component[name=PromoBanner] .content-wrapper .text-content h5{font-size:var(--font-heading-l-size);font-weight:var(--font-heading-l-weight);letter-spacing:var(--font-heading-l-tracking);line-height:var(--font-heading-l-line-height)}