.hop-wordmark,
.hop-mark {
  display: inline-block;
  flex: none;
  background-color: var(--hop-brand-color, #19164e);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: middle;
}

.hop-wordmark {
  width: 144px;
  aspect-ratio: 1774 / 887;
  mask-image: url('./wordmark-navy.png');
}

.hop-mark {
  width: 32px;
  aspect-ratio: 1;
  mask-image: url('./mark-navy.png');
}

.hop-brand-inverse {
  --hop-brand-color: #fff;
}