.banner {
  text-align: center;
  padding: calc(var(--spacer) / 5) calc(var(--spacer) / 2);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--background-content);
}

.banner.error {
  background-color: var(--brand-alert-red);
  color: var(--brand-white);
}

.banner.warning {
  background-color: var(--brand-alert-yellow);
  color: var(--brand-white);
}

.banner.success {
  background-color: var(--brand-alert-green);
  color: var(--brand-white);
}

.banner > div {
  display: inline-block;
}

.text {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-right: calc(var(--spacer) / 4);
  text-align: center;
}

.text a {
  color: inherit;
  text-decoration: underline;
}

.link {
  color: inherit;
  text-decoration: underline;
  text-transform: inherit;
  font-size: var(--font-size-small);
}

.text p:last-child {
  margin-bottom: 0;
}