/* Canonical GRB Labs web lockup. Website and browser tools share these rules. */
:root {
  --grb-brand-lockup-gap: 6px;
  --grb-brand-cube-size: 71px;
  --grb-brand-wordmark-width: 59.4px;
}

.grb-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--grb-brand-lockup-gap);
  color: #fff;
}

.grb-brand-lockup .grb-brand-mark {
  width: var(--grb-brand-cube-size);
  height: var(--grb-brand-cube-size);
  flex: 0 0 var(--grb-brand-cube-size);
  display: grid;
  place-items: center;
}

.grb-brand-lockup .grb-brand-cube {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.grb-brand-lockup .grb-wordmark {
  width: var(--grb-brand-wordmark-width);
  height: auto;
  display: block;
  overflow: visible;
  color: inherit;
  fill: currentColor;
  flex: 0 0 var(--grb-brand-wordmark-width);
}

@media (max-width: 800px) {
  .grb-brand-lockup {
    --grb-brand-cube-size: 55px;
    --grb-brand-wordmark-width: 46.8px;
  }
}