/* Frame the exact approved artwork without changing its pixels. */
:is(.site-header, .site-footer, .auth-header, .workspace-brand) .brand.brand-artwork {
  position: relative;
  display: block;
  width: 250px;
  aspect-ratio: 4;
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #172232;
  flex-shrink: 0;
}
:is(.site-header, .site-footer, .auth-header, .workspace-brand) .brand.brand-artwork img {
  position: absolute;
  width: 126%;
  max-width: none;
  height: auto;
  left: -13.3%;
  top: 50%;
  transform: translateY(-48%);
  object-fit: contain;
}
.site-footer .brand.brand-artwork { width: 230px; }
.workspace-brand { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 30px; }
.workspace-brand .brand.brand-artwork { width: 100%; }
.workspace-brand .workspace-label { text-align: center; font-size: 7px; letter-spacing: .19em; color: #a8dff7; }
@media (max-width: 1100px) {
  .premium-site .site-header .brand-signature { display: none; }
}
@media (max-width: 800px) {
  .site-header .brand.brand-artwork { width: 220px; }
}
@media (max-width: 600px) {
  .site-header .brand.brand-artwork { width: 205px; }
  .auth-header .brand.brand-artwork { width: 190px; max-width: 52vw; }
  .auth-header > a:last-child { font-size: 10px; padding: 10px 11px; }
  .premium-site .site-footer .brand.brand-artwork { width: 230px; grid-column: 1 / -1; }
  .premium-site .site-footer > span { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .site-header .brand.brand-artwork { width: 185px; }
  .auth-header .brand.brand-artwork { width: 165px; }
}