<div class="card">
  <img src="https://picsum.photos/640/?random" alt="">
</div>

<div class="form">
  <div class="controle">
    <label for="border-radius">border-radius:</label>
    <input type="range" min="0" max="180" step="4" value="10" id="border-radius" name="border-radius" />
    <output id="border-radius-output">10px</output>
  </div>
  <div class="controle">
    <label for="border-width">border-width:</label>
    <input type="range" min="0" max="60" step="4" value="0" id="border-width" name="border-width" />
    <output id="border-width-output">0px</output>
  </div>
  <div class="controle">
    <label for="padding">padding:</label>
    <input type="range" min="0" max="60" step="4" value="0" id="padding" name="padding" />
    <output id="padding-output">0px</output>
  </div>

</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 30px;
  grid-template-areas: "card" "form";
}

@media (min-width: 768px) {
  body {
    grid-template-columns: 1fr fit-content(30em);
    grid-template-areas: "card form";
  }
}

.card {
  justify-self: center;
  align-self: center;

  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #09f;
  background-image: linear-gradient(134deg, #3023ae 0%, #c86dd7 100%),
    linear-gradient(134deg, #f36 0%, #f63 100%);
  max-width: 80vw;
  min-width: 40vw;
  margin: 20px;
}

.card img {
  display: block;
  object-fit: cover;
  max-width: 100%;
  height: auto;
  object-position: center;
  background-color: grey;
  aspect-ratio: 16 / 9;
}

.form {
  background-color: rgb(0 0 0 / 0.8);
  padding: 30px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.controle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.controle label {
  min-width: 180px;
  font-size: clamp(1rem, 1.2rem + 2vw, 1.5rem);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.controle output {
  min-width: 3em;
  flex-shrink: 0;
}

.controle input {
  flex: 1 1 0%;
  min-width: 0;
}

:root {
  --border-radius: 10px;
  --border-width: 0px;
  --padding: 0px;
}

.card {
  border-width: var(--border-width);
  border-radius: var(--border-radius);
  padding: var(--padding);
}

.card img {
  --radius: calc(var(--border-radius) - var(--border-width) - var(--padding));
  border-radius: var(--radius);
}

const rootElement = document.documentElement;
const ranges = document.querySelectorAll("input[type='range']");

ranges.forEach((range, index) => {
  range.addEventListener("input", (etv) => {
    let rangeVal = `${etv.target.value}px`;
    rootElement.style.setProperty(`--${etv.target.id}`, rangeVal);
    document.getElementById(`${etv.target.id}-output`).textContent = rangeVal;
  });
});