.wordmark {
  display: block;
  width: 336px;
  max-width: 100%;
  flex: none;
  line-height: 0;
  aspect-ratio: 4 / 1;
  overflow: hidden;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: lighten;
}

.footer-wordmark {
  display: block;
  width: 258px;
  max-width: calc(100% - 72px);
  flex: none;
  line-height: 0;
  aspect-ratio: 4 / 1;
  overflow: hidden;
}

.brand-star {
  display: inline-block;
  width: .8em;
  height: 1.1em;
  vertical-align: -.15em;
  flex: none;
}

@media (max-width: 1100px) {
  .wordmark { width: 272px; }
}

@media (max-width: 820px) {
  .wordmark { width: 272px; max-width: calc(100% - 100px); }
}

@media (max-width: 600px) {
  .wordmark { width: 236px; }
  .footer-wordmark { width: 232px; }
}