:root {
  --b123-scene-ratio: 1616 / 896;
}

/* One immutable lockup geometry; shells may only choose a uniform width. */
.bt-brand-lockup {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 240 / 68;
  overflow: hidden;
}
.bt-brand-compact .bt-brand-lockup { width: 128px; }
.public-brand .bt-brand-lockup { width: 160px; }
.bt-brand-o-accent { fill: #2f9cff; }

/* /esercizi and Libreria host the same preview component. Only the host size differs. */
.exercise-preview-host { overflow: hidden; }
:root.release-3-premium .canonical-diagram-visual {
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--b123-scene-ratio);
  overflow: hidden;
  line-height: 0;
  background: transparent;
}
:root.release-3-premium .canonical-diagram-visual > svg {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: var(--b123-scene-ratio) !important;
  object-fit: contain;
  background: transparent !important;
}
:root.release-3-premium .library-card-image:has(> .canonical-diagram-visual) {
  height: auto !important;
  aspect-ratio: var(--b123-scene-ratio) !important;
  padding: 0 !important;
  background: transparent !important;
}
:root.release-3-premium .modern-library-card.is-assigned:has(.canonical-diagram-visual) {
  grid-column: auto !important;
  max-width: none !important;
}

@media (max-width: 720px) {
  .bt-brand-lockup,
  .bt-brand-compact .bt-brand-lockup,
  .public-brand .bt-brand-lockup { width: 112px; }
}