{
    "status": "OK",
    "placements": [{
        "viewSearchResult_API_desktop-bottom": [{
            "format": "DP",
            "products": [],
            "rendering": {
                "desktop_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "desktop_background_image_alt_text": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "mobile_background_image": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "mobile_background_image_alt_text": "//crtormassetmguseprod.blob.core.windows.net/creativeassets-live/try44gf6h46tyu4yj46gfh64fg6h4rt46r78t8rfb4cdf178378c.jpg",
                "redirect_url": "https://www.criteo.us/p/salade-batavia-3000001ffgghjhg040194",
                "redirect_url_app": "app redirect",
                "redirect_target": "_self"
            },
            "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=gU6UTFHZRX8h%2bLm%2fgfardqYdNcwv1OkAlS4I1Go8pZDMgtJ9b6J28QWdhsC2nAZTzLCJmI3i486hJaSNb8cJMQcCSlgYxB4OSIhR%2bzYBx9jpKqNjHfVQcNiNKp8NNaSTu3BnA23%2fpeljDGSOjBFZEddfotGA1NP%2bVCC8JJMGfgh2n1uJxTdGoTrkriygDOy0iz7qAwf7sj%2bctHKVa2suRSe2ZRLawkZfztW231Vcw3xn0FTPeKbhdhjYGBzNKs%2fkUbP7Q0bLzX0s4WqAqMzV1IppHg%3d%3d&ev=2",
            "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=qK9HLTImiTHdD5zv6c%2fcyCgOlBfgaplqmu0CkokA1jIrovi4qrVG%2bibqys%2b8SojsJTKuZ28LCqGFUlSdX0013z8mG%2frmJhXcnM2bq0V4DSDewNZWUmVGudiBAY8mrK9CB0f0DjKkrhy7tDGmjSiJJgTqLzxIOYAoCQaj664x%2fZVdfgh4RsNU%2fcgtoYMcAI%2fDmZrmoxbPhzH8EFx%2bkm2My4dfHd9MFyuTmDhGLpM3FAhsqdDVD1bKwNJH49PXo2iGztiD&ev=2",
            "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=rjTAB7fXC6J7S%2f8%2bT2IIaMHIMdfg9LvCYDHSua%2bOdx2dEzgUby%2f9fJGwebUZgEoQa2Ecm6RqVonJscN52%2fiwK87d5HxbrfghxGLpGXueXg5ioxvfsm9%2bZ9JHfmCa7zu8QgVRk7Qtq1Kb28gX2%2fup3jaCCckAjMxxgplInlqBxUZ7LRXmqYr8HUrKsTZoYlxmt9s56OaHXEW9YvGeQpou%2fsJjilzmjXb7AJOrndW5ch0TX4G2zZ4qaJyKPuBgl4t1CjHH&ev=2",
            "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=yVma5fEYR2%2baGTU2mFGoD1SImhAifgUXBh4kE5yCe2a%2fiMcLRlrG%2bA1DuZZlyVFolE%2bBYhimmashpJaYNhmBEhbLLSbPIcm35fghNjyhlND50SEwwUwMFYfY58Qmnec3wOjPp%2bwfdH7GDA6fnCP6Yg8N%2flhIlc1bwhNle%2bboNzAfTWEKgv8dM3m%2bYvV5TbXB0W8GHbINKwMwY6nzhU2uKklutTRQTPoxj4kGFfK70Oyx23rd6j3r2864Pl3TLsB6QD1Y&ev=2"
        }]
    }]
}

<div class="rm-format" data-type="DP" role="region" aria-label="advertisement">
  <a href="https://www.criteo.com/" target="_blank">
    <div class="rm-desktopImage-container">
      <img src="https://i.imgur.com/bTHnYyZ.jpg" class="rm-desktopImage" alt="Desktop Advertisement">
      <div class="rm-dimensions-overlay rm-desktopDimensions">
        <span class="rm-width"></span>
        <span>x</span>
        <span class="rm-height"></span>
      </div>
    </div>
    <div class="rm-mobileImage-container">
      <img src="https://i.imgur.com/dnjbSdu.jpg" class="rm-mobileImage" alt="Mobile Advertisement">
      <div class="rm-dimensions-overlay rm-mobileDimensions">
        <span class="rm-width"></span>
        <span>x</span>
        <span class="rm-height"></span>
      </div>
    </div>
  </a>
</div>

.rm-format[data-type='DP'] {
  max-width: 1400px;
  height: 200px;
  margin: 30px auto;
  position: relative;
  margin-top: 5%;
  overflow: hidden;
}

.rm-format[data-type='DP'] a {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.rm-desktopImage-container,
.rm-mobileImage-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.rm-desktopImage {
  width: 100%;
  height: 100%;
   max-width: 1400px; 
  object-fit: none; 
  object-position: center; 
  position: absolute;
}

.rm-mobileImage {
  width: 100%;
  height: auto;
}

.rm-dimensions-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: white;
  background-color: rgba(255, 87, 51, 0.8);
  padding: 10px 10px;
  border-radius: 5px;
  z-index: 10; 
  pointer-events: none; 
  text-align: center;
}

.rm-format[data-type='DP'][data-viewport='mobile'] {
  width: 100%;
  height: auto;
  position: relative;
  padding-top: 66.6%;

  a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    cursor: pointer;
  }

  .rm-mobileImage-container {
    display: block;
  }

  .rm-desktopImage-container {
    display: none;
  }
}

.rm-format[data-type='DP'][data-viewport='desktop'] {
  width: 100%;
  height: 200px;

  .rm-desktopImage-container {
    display: block;
  }

  .rm-mobileImage-container {
    display: none;
  }
}

function updateViewport() {
  const container = document.querySelector('.rm-format[data-type="DP"]');
  const width = window.innerWidth;

  if (width > 750) {
    container.setAttribute('data-viewport', 'desktop');
  } else {
    container.setAttribute('data-viewport', 'mobile');
  }
}

function updateDimensions() {
  const desktopImage = document.querySelector('.rm-desktopImage');
  const mobileImage = document.querySelector('.rm-mobileImage');
  const desktopOverlay = document.querySelector('.rm-desktopImage-container .rm-dimensions-overlay');
  const mobileOverlay = document.querySelector('.rm-mobileImage-container .rm-dimensions-overlay');

  if (desktopImage && desktopOverlay) {
    const desktopRect = desktopImage.getBoundingClientRect();
    desktopOverlay.querySelector('.rm-width').textContent = `${Math.round(desktopRect.width)}`;
    desktopOverlay.querySelector('.rm-height').textContent = `${Math.round(desktopRect.height)}`;
  }

  if (mobileImage && mobileOverlay) {
    const mobileRect = mobileImage.getBoundingClientRect();
    mobileOverlay.querySelector('.rm-width').textContent = `${Math.round(mobileRect.width)}`;
    mobileOverlay.querySelector('.rm-height').textContent = `${Math.round(mobileRect.height)}`;
  }
}

window.addEventListener('resize', () => {
  updateViewport();
  updateDimensions();
});

window.addEventListener('load', () => {
  updateViewport();
  updateDimensions();
});

// Initial updates
updateViewport();
updateDimensions();