<div class="wrapper">
  <div>
    <div style="background:#000; padding: 1.5rem;">
      <div class="logo-row">
        <div class="logo" style="--width:48; --height: 48;"> 
          <img src="https://assets.codepen.io/963316/9elements.svg" alt="" />
        </div>
        <div class="logo" style="--width:228; --height: 48;">
          <img src="https://assets.codepen.io/963316/imgly.svg" alt="" />
        </div> 
        <div class="logo" style="--width:79; --height: 48;">
          <img src="https://assets.codepen.io/963316/CSS+Cafe.svg" alt="" />
        </div>
        <div class="logo" style="--width:60; --height: 48;">
          <img src="https://assets.codepen.io/963316/ruhrgebiet.svg" alt="" />
        </div>
        <div class="logo" style="--width:131; --height: 48;">
          <img src="https://assets.codepen.io/963316/css-4-5.svg" alt="" />
        </div>
        <div class="logo" style="--width:47; --height: 60;">
          <img src="https://assets.codepen.io/963316/owl.svg" alt="" />
        </div>    
        <div class="logo" style="--width:255; --height: 48;">
          <img src="https://assets.codepen.io/963316/10xd.svg" alt="" />
        </div>        
      </div>
    </div>
  </div>

</div>

<div class="controls">
  <div class="slider">
    <label for="base-height-slider">Base Height:</label>
    <input type="range" id="base-height-slider" min="1" max="6" step="0.5" value="3">
    <span id="base-height-value">3rem</span>
  </div>
  <div class="slider">
    <label for="scale-factor-horizontal-slider">Scale landscape:</label>
    <input type="range" id="scale-factor-horizontal-slider" min="0" max="0.2" step="0.01" value="0.1">
    <span id="scale-factor-horizontal-value">0.1</span>
  </div>
  <div class="slider">
    <label for="scale-factor-vertical-slider">Scale portrait:</label>
    <input type="range" id="scale-factor-vertical-slider" min="0" max="1" step="0.1" value="0.6">
    <span id="scale-factor-vertical-value">0.6</span>
  </div>
</div>

.logo-row {
  --base-height: 3rem;
  --scale-factor-horizontal: 0.1;
  --scale-factor-vertical: 0.6;
  --logo-min-size: 0.5;
  --logo-max-size: 1.25;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--icon-gap, 2rem 3rem);
  container-type: inline-size;
}

.logo {
  --base-ratio: calc(var(--width) / var(--height));
  --factor-horizontal: min(var(--scale-factor-horizontal) * -1 * var(--base-ratio) + var(--scale-factor-horizontal) + 1, 1);
  --factor-vertical: max(var(--scale-factor-vertical) * -1 * var(--base-ratio) + var(--scale-factor-vertical) + 1, 1); 

  aspect-ratio: var(--base-ratio);
  height: clamp(
    var(--base-height) * var(--logo-min-size),
    var(--base-height) * var(--factor-horizontal) * var(--factor-vertical),
    var(--base-height) * var(--logo-max-size)
  );
  //max-height: calc(100cqi * var(--height) / var(--width));
  max-width: 100%;
  
  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- Additional CSS Stuff --- */

body {
  margin: 2rem;
  background: #224;
  background-size: 100% 100vh;
  color: #fff;
  accent-color: #f09;
  padding-block-end: 40vh;
}

.wrapper {
  width: min(100% - 1rem, 80rem);
  margin-inline: auto;
  
  > * + * {
    margin-block-start: 4rem;
  }
}

p {
  margin-block-end: 0.5em;
}

.controls {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  border-radius: 0.5rem;
  color: #fff;
  max-width: 90vw;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: max-content auto;
}

.controls .slider {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.controls .slider:last-child {
  margin-bottom: 0;
}

.controls label {
  grid-column: 1 / -1;
}

.controls input[type="range"] {
  margin-right: 0.5rem;
  flex: 1 0 100px;
}

.controls span {
  min-width: 6ch;
  text-align: right;
}

@media (width > 28em) {
  .controls {
    grid-template-columns: max-content auto auto;
    
    & label {
      grid-column: 1;
    }
  }
}

  // Get references to sliders and display spans
  const baseHeightSlider = document.getElementById('base-height-slider');
  const baseHeightValue = document.getElementById('base-height-value');

  const scaleFactorHorizontalSlider = document.getElementById('scale-factor-horizontal-slider');
  const scaleFactorHorizontalValue = document.getElementById('scale-factor-horizontal-value');

  const scaleFactorVerticalSlider = document.getElementById('scale-factor-vertical-slider');
  const scaleFactorVerticalValue = document.getElementById('scale-factor-vertical-value');

  // Function to update CSS variables and display values
  function updateVariables() {
    const baseHeight = baseHeightSlider.value;
    const scaleFactorHorizontal = scaleFactorHorizontalSlider.value;
    const scaleFactorVertical = scaleFactorVerticalSlider.value;

    // Update displayed values
    baseHeightValue.textContent = baseHeight + 'rem';
    scaleFactorHorizontalValue.textContent = scaleFactorHorizontal;
    scaleFactorVerticalValue.textContent = scaleFactorVertical;

    // Update CSS variables on all .logo-row elements
    const logoRows = document.querySelectorAll('.logo-row');
    logoRows.forEach(logoRow => {
      logoRow.style.setProperty('--base-height', baseHeight + 'rem');
      logoRow.style.setProperty('--scale-factor-horizontal', scaleFactorHorizontal);
      logoRow.style.setProperty('--scale-factor-vertical', scaleFactorVertical);
    });
  }

  // Add event listeners to sliders
  baseHeightSlider.addEventListener('input', updateVariables);
  scaleFactorHorizontalSlider.addEventListener('input', updateVariables);
  scaleFactorVerticalSlider.addEventListener('input', updateVariables);

  // Initialize the variables on page load
  updateVariables();