body {
  margin: 0;
  background: #5e563a;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 40px;
  overflow-x: scroll;
}
  
  /* Reset zone */
  .reset-zone {
    position: fixed;
    inset: 0;
    z-index: 0;
  }
  
  /* Hide radios */
  input[type="radio"] {
    display:none;
  }
  
  
.collage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  padding-top: 45%; /* Controls aspect ratio */
  background: #c7cdd2;
  /* box-shadow: 0 4px 20px rgba(0,0,0,0.1); */
  border-radius: 8px;
  overflow: scroll;
}

.image-container {
  position: absolute;
  /* max-width: 20%; */
  height: auto;
  transition: transform 0.3s ease;
  object-fit: cover;
  border: 1px solid rgba(101, 110, 102, 0);
}

  .background-images,
.foreground-images {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
}

.background-images, .foreground-images {
  transform: scale(0.9) translate(-5%, -5%);
  /* transform-origin: top left; */
}

  .background-images .image-container img {
  max-width: 400px; 
  height: 100%;  
  z-index: -1;
  /* min-width: 80%; */
  height: 100%;
  object-fit: contain; 
  display:block;

}
  
  .foreground-images .image-container img{
    min-width: 200px;
    max-width: 300px;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  
  .reverence{
    background-color: rgba(190, 208, 223, 0.688);
    font-size: larger;
    color:white;
    margin:20px;
   
  }

  

/* Specific image positions */
.background-images .img1 { top:13%; left: 14%; position: relative; }
.background-images .img5 { top: 34%; left: 15%; position: relative; }
.background-images .img7 { top: 50%; left: 19%; position: relative; }
.background-images .img9 { top: 35%; left: 35%; position: relative; }
.background-images .img10 { top: 47%; left: 63%; position: relative; }

.background-images .img11 { top: 70%; left: 26%; position: relative; }
.background-images .img15 { top: 61%; left: 32%; position: relative; }
.background-images .img16 { top: 25%; left: 37%; position: relative; }
.background-images .img17 { top: 18%; left: 62%; position: relative; }
.background-images .img18 { top: 57%; left: 46%; position: relative; }

.foreground-images .img2 { top: 15%; left: 56%; position: relative; } 
.foreground-images .img3 { top: 70%; left:  65%; position: relative; }
.foreground-images .img4 { top: 70%; left: 25%; position: relative; }
.foreground-images .img6 { top: 38%; left: 0%; position: relative;}
.foreground-images .img8 { top: 15%; left: 25%; position: relative; }

.foreground-images .img12 { top: 24%; left: 63%; position: relative; }
.foreground-images .img13 { top: 12%; left: 24%; position: relative; }
.foreground-images .img14 { top: 62%; left: 49%; position: relative; }
.foreground-images .img19 { top: 46%; left: 23%; position: relative; }
.foreground-images .img20 { top: 27%; left: 59%; position: relative; }

.foreground-images .img21 { top: 61%; left: 31%; position: relative; }
.foreground-images .img22 { top: 53%; left: 72%; position: relative; }
.foreground-images .img23 { top: 19%; left: 15%; position: relative; }
.foreground-images .img24 { top: 38%; left: 27%; position: relative; }
.foreground-images .img25 { top: 45%; left: 95%; position: relative; }

.foreground-images .img26 { top: 68%; left: 4%; position: relative; }
.foreground-images .img27 { top: 52%; left: 18%; position: relative; }
.foreground-images .img28 { top: 73%; left: 56%; position: relative; }
.foreground-images .img29 { top: 48%; left: 47%; position: relative; }
  
.asdklfj{
  display: grid;
  grid-column:2/3;
    background-color: rgba(190, 208, 223, 0.688);
    font-size: larger;
    color:white;
    margin: 20px;
    z-index: 1;
  }
  /* Bring selected image to front */
  #img1:checked ~ .collage .img1,
  #img2:checked ~ .collage .img2,
  #img3:checked ~ .collage .img3,
  #img4:checked ~ .collage .img4,
  #img5:checked ~ .collage .img5,
  #img6:checked ~ .collage .img6,
  #img7:checked ~ .collage .img7,
  #img8:checked ~ .collage .img8,
  #img9:checked ~ .collage .img9,
  #img10:checked ~ .collage .img10,
  #img11:checked ~ .collage .img11,
  #img12:checked ~ .collage .img12,
  #img13:checked ~ .collage .img13,
  #img14:checked ~ .collage .img14,
  #img15:checked ~ .collage .img15,
  #img16:checked ~ .collage .img16,
  #img17:checked ~ .collage .img17,
  #img18:checked ~ .collage .img18,
  #img19:checked ~ .collage .img19,
  #img20:checked ~ .collage .img20,
  #img21:checked ~ .collage .img21,
  #img22:checked ~ .collage .img22,
  #img23:checked ~ .collage .img23,
  #img24:checked ~ .collage .img24,
  #img25:checked ~ .collage .img25,
  #img26:checked ~ .collage .img26,
  #img27:checked ~ .collage .img27,
  #img28:checked ~ .collage .img28,
  #img29:checked ~ .collage .img29
  
   {
    z-index: 10;
    transform: scale(1.1);
    /* box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); */
  }