.callout {
  --background-color: var(--white);
  --border-color: var(--light-gray-3);

  color: rgb(31, 31, 31);
  padding: var(--size-spacing-12) var(--size-spacing-16);
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--background-color);
  margin-bottom: var(--content-gap);
}

.callout--info {
  --background-color: var(--blue-100);
  --border-color: var(--blue-200);
}

.callout--success {
  --background-color: var(--green-100);
  --border-color: var(--green-200);
}

.callout--warning {
  --background-color: var(--yellow-100);
  --border-color: var(--yellow-200);
}

.callout--error {
  --background-color: var(--red-100);
  --border-color: var(--red-200);
}

.callout__icon {
  flex: 0 0 24px;
  margin-right: var(--size-spacing-16);
}

.callout__icon img {
  margin: 0;
}