.callout {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--grapes-unit-8);
  padding: var(--grapes-unit-16);
  border-radius: var(--grapes-border-radius-8);
  text-align: left;
}

.callout[data-variant='alert'] {
  background-color: var(--grapes-color-background-secondary-alert-default);
}
.callout[data-variant='alert'] :is(.calloutTitle, .icon) {
  color: var(--grapes-color-content-alert-default);
}

.callout[data-variant='info'] {
  background-color: var(--grapes-color-background-secondary-info-default);
}
.callout[data-variant='info'] :is(.calloutTitle, .icon) {
  color: var(--grapes-color-content-info-default);
}

.callout[data-variant='success'] {
  background-color: var(--grapes-color-background-secondary-success-default);
}
.callout[data-variant='success'] :is(.calloutTitle, .icon) {
  color: var(--grapes-color-content-success-default);
}

.callout[data-variant='warning'] {
  background: var(--grapes-color-background-secondary-warning-default);
}
.callout[data-variant='warning'] :is(.calloutTitle, .icon) {
  color: var(--grapes-color-content-warning-default);
}

.calloutTitle,
.icon {
  color-scheme: light;
}
.calloutTitle {
  font: var(--grapes-title-m);
}

.calloutContent {
  font: var(--grapes-body-m);
  color: var(--_grapes-color-carbon-100);
  grid-column-start: 2;
}