problem trying to make div responsive using CSS

Question

I'm new to css / html / js what I'm trying to fix is the images placement in Div, i wanna make it more organized and responsive so when I resize chrome i wont end up having a messy images all over the place.

what I ended up having is a div full of non organized photos getting out of the window and colliding to each other.

Also im trying to make the Div responsive so it wont go out of the screen. When i tried to change the resolution of my screen, i ended up having a very small Div, so i wanna scale it based on navigator size

i have tried all css positions Fixed, Relative, absolute etc any ideas?

https://jsfiddle.net/AdamMsakni/5u8s3daq/68/

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);}

.img-1 {
 position: fixed;
  bottom: 85%;
  right: 73%;
  border-radius: 4px;
    transition: transform .2s;
    width: 20%;
}
.img-2 {
 position: fixed;
  bottom: 85%;
  right: 40%;
  border-radius: 4px;
    transition: transform .2s;
        width: 20%;
}
.img-3 {
 position: fixed;
  bottom: 85%;
  right: 7%;
  border-radius: 4px;
    transition: transform .2s;
        width: 20%;
}
.img-4 {
 position: fixed;
  bottom: 60%;
  right: 73.5%;
  border-radius: 4px;
    transition: transform .2s;
        width: 20%;
}
.img-5 {
 position: fixed;
  bottom: 60%;
  right: 40%;
  border-radius: 4px;
    transition: transform .2s;
        width: 20%;
}
.img-6 {
 position: fixed;
  bottom: 60%;
  right: 8%;
  border-radius: 4px;
    transition: transform .2s;
        width: 20%;
}
.img-7 {
 position: fixed;
  bottom: 35%;
  right: 74%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}
.img-8 {
 position: fixed;
  bottom: 35%;
  right: 40%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}
.img-9 {
 position: fixed;
  bottom: 35%;
  right: 8%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}

.img-10 {
 position: fixed;
  bottom: 6%;
  right: 74%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}
.img-11 {
 position: fixed;
  bottom: 6%;
  right: 40%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}
.img-12 {
 position: fixed;
  bottom: 6%;
  right: 7%;
  border-radius: 4px; 
    transition: transform .2s;
        width: 20%;
}
.Hover:hover {
      -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1);}
.Hover:active {
transform: translateY(0);}




.Box {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
  background: rgba(255, 255, 255, 0.15);
border-radius: 20 px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2.6px);
-webkit-backdrop-filter: blur(20.6px);
  padding: 0  ;
border: 0px solid rgba(255, 255, 255, 0.39);
}
.Box:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.Box > div {
  width: 60%;
  height: 50%;
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 9em;

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.09);
}
.Box header {
  font-weight: bold;
}
.Box h1 {
  font-size: 150%;
  margin: 0 0 15px;
}
.close {
  color: #040405;
  line-height: 40px;
  font-size: 150%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 40px;
  text-decoration: none;}


* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

<center>
<div class="container"></div>
<div>

<a id="select_windows" style="color:White;" href="#Select_version"><b>Open window</b>


<div id="Select_version" class="Box">
<div>
<a href="#" title="Close" class="close">X</a>

<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-1 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-2 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-3 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-4 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-5 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-6 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-7 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-8 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-9 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-10 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-11 Hover"></a>
<a><img src="https://drive.google.com/uc?id=1CKyzAC5x0XOAgJPZ4iM7IPh-jVS9eppQ"class="img-12 Hover"></a>

</div>
</div>