/* Original uploaded artwork stays intact; the frames hide only its empty margins. */
.workspace-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.workspace-brand-home { display: block; width: 100%; border-radius: 5px; }
.workspace-brand-home:focus-visible { outline: 2px solid #ffc928; outline-offset: 4px; }
.brand-image { display: block; position: relative; overflow: hidden; border-radius: 5px; }
.brand-image img {
  display: block;
  position: absolute;
  width: 118%;
  max-width: none;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.brand-image-3p { width: 100%; aspect-ratio: 3.5; background: #fff; }
.brand-image-dhl { width: 86px; height: 23px; background: #ffcf28; }
.app-nav .workspace-brand { flex-shrink: 0; padding-bottom: 18px; }
.login-brand .workspace-brand { width: min(260px, 100%); align-self: flex-start; align-items: flex-start; gap: 10px; }
.login-brand .brand-image-dhl { width: 112px; height: 30px; }

@media (min-width: 601px) and (max-width: 900px) {
  .app-nav .workspace-brand { gap: 5px; padding-bottom: 16px; }
  /* The emblem remains legible in the existing icon-only sidebar. */
  .app-nav .brand-image-3p { aspect-ratio: 1.15; }
  .app-nav .brand-image-3p img { width: 350%; left: 136%; }
  .app-nav .brand-image-dhl { width: 40px; height: 16px; }
}
@media (max-width: 600px) {
  .app-nav .workspace-brand { width: 70px; padding: 0; gap: 3px; margin-right: auto; }
  .app-nav .brand-image-3p { aspect-ratio: 3.1; }
  .app-nav .brand-image-dhl { width: 44px; height: 14px; }
  .login-brand .workspace-brand { width: 210px; }
}