.ds-stage-banner {
  background: var(--ds-color-paris-90);
  border-bottom: 0.0625rem solid var(--ds-color-paris-85);
  border-top: 0.0625rem solid var(--ds-color-paris-85);
  box-sizing: border-box;
  padding: 0.5rem var(--ds-grid-gap);
  width: 100%;
}

.ds-layout-stage-banner {
  align-items: center;
  display: flex;
  margin: 0 auto;

  /* max-width: 89.5rem; Leave this to the consumer */
}

.ds-stage-banner__badge {
  align-items: center;
  background-color: var(--ds-color-chicago-20);
  box-sizing: border-box;
  color: var(--ds-color-london-100);
  display: inline-flex;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale--1);
  font-weight: 700;
  height: 2rem;
  letter-spacing: 0.04rem;
  line-height: var(--ds-type-leading-border-link);
  margin: 0 1rem 0 0;
  padding: 0.375rem 0.75rem;
  text-transform: uppercase;
}

.ds-stage-banner__text {
  color: var(--ds-color-london-5);
  font-family: var(--ds-type-system-sans);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  b,
  strong {
    font-weight: 700;
  }
  i,
  em {
    font-style: italic;
  }
  a {
    border-bottom: 0.0625rem solid var(--ds-color-chicago-45);
    color: var(--ds-color-london-5);
    text-decoration: none;
    transition: all var(--ds-interactions-transition);
    will-change: border-color, color;
    &:hover {
      border-bottom-color: var(--ds-color-chicago-30);
      color: var(--ds-color-chicago-30);
    }
    &:focus {
      border-bottom-color: transparent;
      box-shadow: 0 0 0 0.0625rem var(--ds-color-hong-kong-55);
      outline: solid transparent;
    }
    &:active {
      border-bottom-color: var(--ds-color-hong-kong-55);
      box-shadow: none;
      color: var(--ds-color-london-5);
    }
  }
}

@media (--ds-viewport-min-medium) {
  .ds-stage-banner {
    padding-left: var(--ds-grid-gutter);
    padding-right: var(--ds-grid-gutter);
  }
}