.brand-mark {
  background: transparent;
  border-radius: 0;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: hsl(var(--primary));
}

.brand-mark::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 14.5h8.5L16.8 3.1c.35-.73 1.42-.46 1.38.35l-.65 11.05h7.3l2.7-3.15c.55-.64 1.58-.02 1.25.82l-1.23 3.02 1.23 3.02c.33.84-.7 1.46-1.25.82l-2.7-3.15h-7.3l.65 11.05c.04.81-1.03 1.08-1.38.35L10.5 16.5H2c-.8 0-.8-2 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 14.5h8.5L16.8 3.1c.35-.73 1.42-.46 1.38.35l-.65 11.05h7.3l2.7-3.15c.55-.64 1.58-.02 1.25.82l-1.23 3.02 1.23 3.02c.33.84-.7 1.46-1.25.82l-2.7-3.15h-7.3l.65 11.05c.04.81-1.03 1.08-1.38.35L10.5 16.5H2c-.8 0-.8-2 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.brand-mark > .brand-mark-wing,
.brand-mark > .brand-mark-dot {
  display: none;
}

.brand-mark-light {
  background: transparent;
  color: hsl(var(--accent));
}

@media (max-width: 640px) {
  .brand-mark {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
}