@layer sections {
  .announcement { position: relative; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; z-index: 2; }
  .announcement__inner { display: flex; align-items: center; }
  .announcement__marquee { flex: 1; min-width: 0; }
  .announcement__item { padding-block: 0.72rem; gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); }
  .announcement__item .icon { width: 1.05rem; height: 1.05rem; margin-right: -0.7rem; color: var(--accent); }
  .announcement__item a { text-decoration: none; }
  .announcement__item a:hover { color: var(--accent); }
  .announcement .marquee__sep { color: var(--accent); width: 0.55em; height: 0.55em; }
  .announcement__close { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; margin-right: 0.5rem; border-radius: 50%; opacity: 0.8; }
  .announcement__close:hover { background: rgb(255 255 255 / 0.1); opacity: 1; }
  .announcement__close .icon { width: 1rem; height: 1rem; }
}