<div class="wrapper">
  <div>
    <div style="background:#000; padding: 1.5rem;">
      <div class="logo-row">
        <img class="logo" style="--width:48; --height: 48;" src="https://assets.codepen.io/963316/9elements.svg" alt="" />
        <img class="logo" style="--width:228; --height: 48;" src="https://assets.codepen.io/963316/imgly.svg" alt="" />
        <img class="logo" style="--width:79; --height: 48;" src="https://assets.codepen.io/963316/CSS+Cafe.svg" alt="" />
        <img class="logo" style="--width:60; --height: 48;" src="https://assets.codepen.io/963316/ruhrgebiet.svg" alt="" />
        <img class="logo" style="--width:131; --height: 48;" src="https://assets.codepen.io/963316/css-4-5.svg" alt="" />
        <img class="logo" style="--width:47; --height: 60;" src="https://assets.codepen.io/963316/owl.svg" alt="" />
        <img class="logo" style="--width:255; --height: 48;" src="https://assets.codepen.io/963316/10xd.svg" alt="" />
      </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="strength-slider">Strength:</label>
    <input type="range" id="strength-slider" min="0" max="1.5" step="0.01" value="1">
    <span id="strength-value">100%</span>
  </div>  
</div>

/* Thanks to Roman (https://kizu.dev/) for suggestiong this solution */

.logo-row {
  --strength: 1; 
  --base-height: 3rem;
  --logo-min-size-factor: 0.375;
  --logo-max-size-factor: 1.25;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--icon-gap, 2rem 3rem);
  container-type: inline-size;
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

.logo {
  --captured-length: var(--base-height);
  --area: pow(
    tan(atan2(var(--captured-length), 1px)),
    2
  );
  --diff: sqrt(
    var(--area)
    /
    (var(--width) * var(--height))
  );
  
  --scaled-height: calc(1px * var(--height) * var(--diff));
  
  height: clamp(
    var(--base-height) * var(--logo-min-size-factor),
    var(--base-height) + (var(--scaled-height) - var(--base-height)) * var(--strength),
    var(--base-height) * var(--logo-max-size-factor)
  );
}

/* --- 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 strengthSlider = document.getElementById('strength-slider');
  const strengthValue = document.getElementById('strength-value');

  // Function to update CSS variables and display values
  function updateVariables() {
    const baseHeight = baseHeightSlider.value;
    const strength = strengthSlider.value;

    // Update displayed values
    baseHeightValue.textContent = baseHeight + 'rem';
    strengthValue.textContent = Math.round(strength * 100) + '%';

    // 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('--strength', strength);
    });
  }

  // Add event listeners to sliders
  baseHeightSlider.addEventListener('input', updateVariables);
  strengthSlider.addEventListener('input', updateVariables);
 
  // Initialize the variables on page load
  updateVariables();