.gagarin-brand-logo {
  display: inline-block;
  width: min(100%, 380px);
  aspect-ratio: 520 / 72;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/brand/gagarin-city-transparent.svg') center / contain no-repeat;
  mask: url('/assets/img/brand/gagarin-city-transparent.svg') center / contain no-repeat;
}
.project__name:has(.gagarin-brand-logo) { width: min(100%, 380px); }
body.shg-site #projects .project__name--wordmark {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  text-wrap: balance;
}
.gagarin-brand-heading { color: var(--ink); }
.gagarin-brand-heading .gagarin-brand-logo { width: min(100%, 510px); }

.hako-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
}
.project__name:has(.hako-brand-logo) {
  width: clamp(130px, 11vw, 150px);
}
.project__name .hako-brand-logo {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  filter: brightness(0) invert(1);
}
.project:hover .project__name .hako-brand-logo,
.project:focus-visible .project__name .hako-brand-logo {
  filter: brightness(0) invert(1);
}
.hako-brand-heading {
  color: var(--ink);
}
.hako-brand-heading .hako-brand-logo {
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  filter: brightness(0);
}
.gagarin-brand-subheading .gagarin-brand-logo {
  width: min(100%, 380px);
}
.hako-brand-subheading .hako-brand-logo {
  width: min(100%, 150px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  filter: brightness(0);
}