/*
 * Room for pictures before they arrive, so the page does not move when they
 * do (layout shift). Not on live.
 */

/* The client logos (.cl-logos-simple): size-less SVGs the browser draws
   300px wide at their viewBox's proportions, shrunk by the theme's
   max-width / max-height for each width below. --svg-ratio (the viewBox's
   width / height, src/structured/svg-size.ts) gives each the same box
   before the file is there; once it is, the file is drawn in that box
   exactly as before. */
.cl-logos-simple__images img[style*="--svg-ratio"] {
  width: min(300px, 200px, calc(50px * var(--svg-ratio)));
  aspect-ratio: var(--svg-ratio);
}
@media screen and (max-width: 991px) {
  .cl-logos-simple__images img[style*="--svg-ratio"] { width: min(300px, 100px, calc(25px * var(--svg-ratio))); }
}
@media screen and (max-width: 768px) {
  .cl-logos-simple__images img[style*="--svg-ratio"] { width: min(300px, 85px, calc(22px * var(--svg-ratio))); }
}
@media screen and (max-width: 550px) {
  .cl-logos-simple__images img[style*="--svg-ratio"] { width: min(300px, 120px, calc(25px * var(--svg-ratio))); }
}
@media screen and (max-width: 390px) {
  .cl-logos-simple__images img[style*="--svg-ratio"] { width: min(300px, 110px, calc(25px * var(--svg-ratio))); }
}