.monogram {
  width: 67px;
  height: 67px;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
  font-size: 0;
}

.monogram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

.site-header .monogram {
  cursor: zoom-in;
  outline-offset: 3px;
}

.wordmark.light .monogram {
  border: 0;
}

@media (max-width: 620px) {
  .monogram {
    width: 63px;
    height: 63px;
  }
}

@media (max-width: 420px) {
  .wordmark .monogram {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 380px) {
  .wordmark .monogram {
    width: 55px;
    height: 55px;
  }
}