:root {
  --cpl-logo-full-width: 220px;
  --cpl-logo-radius: 10px;
  --cpl-logo-compact-size: 44px;
}

.login-logo {
  display: block;
  width: min(var(--cpl-logo-full-width), 82%);
  height: auto;
  max-height: none;
  margin-right: auto;
  margin-left: auto;
  object-fit: contain;
}

.side-logo {
  display: block;
  width: 185px;
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: var(--cpl-logo-radius);
  background: #fff;
  object-fit: contain;
}

.mobile-brand-mark {
  width: var(--cpl-logo-compact-size);
  height: var(--cpl-logo-compact-size);
  padding: 0;
  overflow: hidden;
  border-radius: var(--cpl-logo-radius);
  background: #fff;
}

.mobile-brand-mark img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.developer-card > img {
  width: var(--cpl-logo-full-width);
  height: auto;
  max-width: 82%;
  object-fit: contain;
}

@media (max-width: 1050px) and (min-width: 701px) {
  .side-logo {
    width: 50px;
    height: 50px;
    padding: 3px;
    object-fit: cover;
  }
}

@media (max-width: 540px) {
  :root {
    --cpl-logo-full-width: 200px;
    --cpl-logo-compact-size: 42px;
  }
}