.announcement {
  height: var(--announcement-desktop-height, 38px);
  background: var(--announcement-background, #f59b23);
  color: var(--announcement-foreground, #fff);
}
.announcement-inner {
  height: var(--announcement-desktop-height, 38px);
  gap: 10px;
}
.announcement-text,.announcement-close { color: inherit; }
.announcement-text { line-height: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-media-link { height: min(80%, 110px); max-width: min(24%, 140px); flex: none; display: flex; align-items: center; justify-content: center; }
.announcement-media-link:not([href]) { cursor: default; }
.announcement-media-link picture,.announcement-media-link img { display: block; width: 100%; height: 100%; }
.announcement-media-link img { object-fit: contain; }
.announcement[data-announcement-mode="image"] .announcement-inner { width: 100%; }
.announcement[data-announcement-mode="image"] .announcement-media-link { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.announcement[data-announcement-mode="image"] .announcement-media-link img { object-fit: cover; }
.announcement[data-announcement-mode="image"] .announcement-text { display: none; }
.announcement[data-announcement-mode="image"] .announcement-close { z-index: 1; left: max(12px, calc((100vw - 1180px) / 2)); background: color-mix(in srgb, var(--announcement-background, #f59b23) 80%, transparent); }
@media(max-width:820px) {
  .announcement,.announcement-inner { height: var(--announcement-mobile-height, 30px); }
  .announcement-inner { gap: 6px; }
  .announcement-media-link { max-width: min(24%, 72px); }
}