/* One opaque wordmark for the avatar, website identity and browser icon. */
.brand {
  flex-shrink: 0;
  padding: 0;
}

.brand-logo {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
}

.art-title.brand-title {
  line-height: 0;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* The square brand image is cropped into the site's 4:3 artwork frame. */
.brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 650px) {
  .brand-logo {
    width: 80px;
    height: 60px;
  }

  .art-title.brand-title {
    margin-top: 16px;
    margin-bottom: 12px;
  }
}