const windowW = document.querySelector(".window-width")
const windowD = document.querySelector(".window-density")
const s1ImgW = document.querySelector(".s1-img-width")
const s2ImgW = document.querySelector(".s2-img-width")
const s3ImgW = document.querySelector(".s3-img-width")

const s1Img = document.querySelector(".section-1 img")
const s2Img = document.querySelector(".section-2 img")
const s3Img = document.querySelector(".section-3 img")

window.addEventListener("resize", updateInfo)

updateInfo()

function updateInfo() {
  windowW.textContent = `${window.innerWidth} (CSS Pixels)`
  windowD.textContent = `${window.devicePixelRatio}`
  s1ImgW.textContent = `${s1Img.width} (CSS Pixels)`
  s2ImgW.textContent = `${s2Img.width} (CSS Pixels)`
  s3ImgW.textContent = `${s3Img.width} (CSS Pixels)`
}
