.brbg-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  flex-shrink: 0;
}

.brbg-mark > span {
  display: block;
  width: 7px;
}

.brbg-mark > span:nth-child(1) { height: 36%; background: #08134c; }
.brbg-mark > span:nth-child(2) { height: 57%; background: #8a8a8a; }
.brbg-mark > span:nth-child(3) { height: 79%; background: #aaaaaa; }
.brbg-mark > span:nth-child(4) { height: 100%; background: #C99B24; }

.brbg-brand-animated .brbg-mark > span {
  transition: height 300ms ease;
}

.brbg-brand-animated:is(:hover, :focus-visible) .brbg-mark > span:nth-child(1) { height: 46%; }
.brbg-brand-animated:is(:hover, :focus-visible) .brbg-mark > span:nth-child(2) { height: 67%; }
.brbg-brand-animated:is(:hover, :focus-visible) .brbg-mark > span:nth-child(3) { height: 89%; }

@media (prefers-reduced-motion: reduce) {
  .brbg-brand-animated .brbg-mark > span {
    transition: none;
  }
}

.brbg-wordmark {
  color: #08134c;
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.brbg-brand-inverse .brbg-wordmark { color: #ffffff; }
.brbg-brand-inverse .brbg-mark > span:nth-child(1) { background: #b6bfce; }