<fieldset>
  <legend>Control image's width</legend>
  <input type="range" id="width" name="width" min="10" max="100" value="50" step="1" />
</fieldset>
<article>
  <h1>Fusce izzle dolor</h1>
  <p>Lorizzle ipsizzle dolor sit amizzle, fizzle adipiscing elit. Nullam sapizzle velizzle, shizzlin dizzle volutpat, suscipizzle quis, nizzle i'm in the shizzle.</p>
  <figure class="break-out">
    <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="resting cat with eyes closed on wooden floor" />
    <figcaption>A cat meditating on a wooden floor</figcaption>
  </figure>
  <p> Pellentesque crackalackin sizzle. Sizzle erizzle. Dawg izzle fo shizzle dapibizzle turpis my shizz check out this. Maurizzle pellentesque da bomb own yo' turpizzle. Bow wow wow izzle fizzle. Pellentesque fo shizzle mah nizzle fo rizzle, mah home g-dizzle rhoncizzle ma nizzle. In hac habitasse platea doggy. Own yo' dapibizzle. Funky fresh gizzle break yo neck, yall, pretizzle nizzle, mattizzle ac, eleifend vitae, nunc. Dope suscipizzle. Mah nizzle sempizzle velizzle sizzle purus.</p>
</article>

/** SETTING UP **/
* {
  margin: 0;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

input,
label {
  cursor: pointer;
}

img {
  max-width: 100%;
  object-fit: cover;
  max-height: 400px;
 
}

fieldset {
  max-width: 600px;
  margin: 1rem auto;
}

.input-group {
  font-size: 3rem;
  display: flex;
  gap: 5px;
}

legend {
  background-color: black;
  color: white;
  padding: 5px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  letter-spacing: 0.3px;
  font-weight: 600;
}

input[type="range"] {
  width: 100%;
}

article > * + * {
  margin-top: 2em;
}

article h1 {
  text-align: center;
  font-size: 3rem;
}

.image-bleeding {
  margin-top: 15px;
  margin-bottom: 15px;
  transition: margin 0.3s ease-in-out;
}

article > * {
  max-width: 60ch;
  font-size: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

figcaption {
  margin-top: 7px;
  color: #777;
}
/** END SETTING UP **/

.break-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

const article = document.querySelector("article");
const bleeding = document.querySelector("img");

document.querySelectorAll("input").forEach((radio) => {
  if (radio.name === "width") {
    bleeding.style.width = radio.value + "vw";
  }
  radio.addEventListener("input", (event) => {
    if (event.target.name === "width") {
      bleeding.style.width = event.target.value + "%";
    }
  });
});