.consulHero {
  /* Customize the branding  */
  & :global(.carousel .controls .control) {
    color: var(--gray-2);
    & :global(.progress-bar) {
      background: var(--gray-5);
      & span {
        background: var(--consul);
      }
    }
  }
  & :global(.g-hero .carousel) {
    & :global(.video-wrapper.is-active) {
      /* Padding % modifier differs slightly from react-hero to accommodate video heights  */
      padding-top: calc((100% * 0.57) + 28px); /* !important; */
    }
  }
}