.banner {
  display: flex;
  place-items: center start;
  gap: var(--grapes-unit-24);
  padding: var(--grapes-unit-24);
  border-radius: var(--grapes-border-radius-12);
  background: var(--grapes-color-background-secondary-brand-default);

  &[data-variant='neutral'] {
    background: var(--grapes-color-background-secondary-default);
  }
}

.container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--grapes-unit-8);
}

.banner[data-variant='brand'] :is(.title, .description) {
  color-scheme: light;
}

.title {
  font: var(--grapes-title-l);
  color: var(--grapes-color-content-primary);
  margin: 0;
}

.description {
  font: var(--grapes-body-m);
  color: var(--grapes-color-content-secondary-bg-secondary);
  margin: 0;
}

.actions {
  display: flex;
  gap: var(--grapes-unit-8);
}