.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  font: inherit;
}

.brand-monogram {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.08em;
  white-space: nowrap;
  font: 600 1.05rem/1 var(--serif);
}

.brand-monogram span {
  font: inherit;
}

.brand-monogram i {
  font: italic 400 0.68em/1 var(--serif);
}

@media (max-width: 560px) {
  .brand-mark {
    flex-basis: 42px;
  }

  .brand-monogram {
    font-size: 0.92rem;
  }
}