.banner {
  padding: 0.75rem 1rem;
  border: 1px solid light-dark(var(--color-gray-200), var(--color-zinc-700));
  border-radius: var(--border-radius);

  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-100), var(--color-zinc-800)) 0%,
    light-dark(var(--color-gray-50), var(--color-zinc-900)) 100%
  );
  box-shadow:
    0 1px 1px light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1))
      inset,
    0 1px 3px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
  color: light-dark(var(--color-gray-800), var(--color-zinc-200));
  font-size: 13px;
  line-height: 1.4;
}

.banner--flat {
  background: light-dark(var(--color-gray-50), var(--color-zinc-900));
  box-shadow: none;
  border-color: light-dark(var(--color-gray-300), var(--color-zinc-700));
}

.banner--danger {
  background: light-dark(var(--color-red-50), var(--color-red-950));
  color: light-dark(var(--color-red-600), var(--color-red-200));
  border-color: light-dark(var(--color-red-200), var(--color-red-900));
}

.banner__title {
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: light-dark(var(--color-gray-500), var(--color-zinc-300));
  letter-spacing: 0.025em;
  font-weight: 500;
}

.banner__title--danger {
  color: light-dark(var(--color-red-600), var(--color-red-200));
}