/* One optical envelope, reduced 20%. Source pixels and r04 transparency stay untouched. */
.ref-logo-grid {
  --logo-density: .8;
  --logo-slot-width: 140px;
  --logo-slot-height: 55px;
}
.ref-logo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: calc(var(--logo-slot-width) * var(--logo-density));
  height: calc(var(--logo-slot-height) * var(--logo-density));
}
.ref-logo-mark {
  --mark-aspect: 2;
  --mark-canvas: 1;
  --mark-x: 0%;
  --mark-y: 0%;
  display: block;
  position: relative;
  width: min(100%, calc(var(--logo-slot-height) * var(--logo-density) * var(--mark-aspect)));
  aspect-ratio: var(--mark-aspect);
}
.ref-logo-grid .ref-logo-mark img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--mark-canvas));
  height: auto;
  max-width: none;
  max-height: none;
  transform: translate(var(--mark-x), var(--mark-y));
}
/* A new administrator source without measured bounds still fits without clipping. */
.ref-logo-grid .ref-logo-mark[style=""] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 700px) {
  .ref-logo-grid {
    --logo-slot-width: 100px;
    --logo-slot-height: 40px;
  }
}