.cobalt-banner {
  @apply c-text-body-md c-bg-surfaceContainerVariant c-rounded-xl c-p-sm c-gap-sm;

  position: relative;

  display: flex;

  &--secondary {
    @apply c-bg-secondaryContainer c-text-onSecondaryContainer;
  }

  &--tertiary {
    @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
  }

  &--business {
    @apply c-bg-business c-text-onBusiness;
  }

  &__title {
    @apply c-text-title-sm c-mb-2xs;
  }

  &__body {
    flex: 1 1;
  }

  &__body a {
    color: inherit;
  }

  &__content {
    flex: 1 1;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
  }

  &__illustration {
    @apply c-rounded-xl;

    width: 100px;

    object-fit: cover;
  }

  .cob-Button,
  .cobalt-button {
    @apply c-mt-xs;
  }
}