:root {
  --published-brand-logo-max-width: 220px;
  --published-brand-logo-max-height: 48px;
  --published-brand-logo-mobile-max-width: 180px;
  --published-brand-logo-mobile-max-height: 40px;
}

.published-brand-logo-frame {
  display: grid;
  place-items: center;
  width: var(--published-brand-logo-max-width);
  height: var(--published-brand-logo-max-height);
  flex: 0 0 var(--published-brand-logo-max-width);
  overflow: hidden;
}

.published-brand-logo-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: var(--published-brand-logo-max-width);
  max-height: var(--published-brand-logo-max-height);
  object-fit: contain;
  transform: scale(var(--published-brand-logo-scale, 1));
  transform-origin: left center;
}

.viewer-shell .published-brand-logo-frame {
  border: 0;
  background: transparent;
}

.viewer-shell .brand {
  overflow: visible;
}

.viewer-shell .published-brand-logo-image {
  max-width: min(var(--published-brand-logo-max-width), calc(100vw - 32px));
}

@media (max-width: 760px) {
  :root {
    --published-brand-logo-max-width: var(--published-brand-logo-mobile-max-width);
    --published-brand-logo-max-height: var(--published-brand-logo-mobile-max-height);
  }

  .published-brand-logo-frame {
    width: var(--published-brand-logo-max-width);
    height: var(--published-brand-logo-max-height);
    flex-basis: var(--published-brand-logo-max-width);
  }
}