@layer ds.block {
    .block-notice-bar { background: var(--color-surface-2); }

    .notice-bar__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-7);
        align-items: center;
    }

    .notice-bar__icon { width: 2rem; height: 2rem; color: var(--color-heading); stroke-width: 1.3; }

    .notice-bar__body { display: flex; flex-direction: column; gap: var(--space-2); }

    .notice-bar__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--font-weight-bold); color: var(--color-heading); }

    .notice-bar__text { margin: 0; max-width: 72ch; font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }
    .notice-bar__text a { color: var(--color-primary); font-weight: var(--font-weight-medium); }

    .notice-bar__cta { white-space: nowrap; }

    @media (max-width: 64rem) {
        .notice-bar__inner { grid-template-columns: 1fr; text-align: left; gap: var(--space-4); }
        .notice-bar__cta { justify-self: start; }
    }
}