<style>
  #arena-image-box2 {
    width: 320px;            
    height: auto;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 17px;
  }
  #arena-image-box2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;       
  }
</style>
<div id="arena-image-box2">
  <img id="randomImage2" alt="Loading...">
</div>
<script>
{
  const channelSlug = "your-train";
  async function loadRandomImage2() {
    try {
      const channelRes = await fetch("https://api.are.na/v3/channels/" + channelSlug);
      if (!channelRes.ok) throw new Error("HTTP error! Status: " + channelRes.status);
      const channelData = await channelRes.json();
      const totalBlocks = channelData.counts && channelData.counts.contents ? channelData.counts.contents : 0;
      if (totalBlocks === 0) {
        document.getElementById("arena-image-box2").innerHTML = "<p>No images found.</p>";
        return;
      }
      const perPage = 100;
      const totalPages = Math.ceil(totalBlocks / perPage);
      const randomPage = Math.floor(Math.random() * totalPages) + 1;
      const res = await fetch("https://api.are.na/v3/channels/" + channelSlug + "/contents?per=" + perPage + "&page=" + randomPage + "&sort=position_desc");
      if (!res.ok) throw new Error("HTTP error! Status: " + res.status);
      const data = await res.json();
      const blocks = data.data || [];
      const imageBlocks = blocks.filter(b => b.type === "Image" && b.image);
      if (imageBlocks.length === 0) {
        document.getElementById("arena-image-box2").innerHTML = "<p>No images found.</p>";
        return;
      }
      const randomBlock = imageBlocks[Math.floor(Math.random() * imageBlocks.length)];
      const src = (randomBlock.image.large && randomBlock.image.large.src) || randomBlock.image.src || '';
      document.getElementById("randomImage2").src = src;
    } catch (err) {
      console.error(err);
      document.getElementById("arena-image-box2").innerHTML = "<p>Error loading image.</p>";
    }
  }
  loadRandomImage2();
}
</script>