body {
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 98%;
    height: 98%;
}

.parent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1px;
    --n:3;
}

.child {
    width:calc((100% - (var(--n) - 1)*10px)/var(--n));
    aspect-ratio:1.4/1;
}


@media (max-width: 800px) {
  .child {
    flex: 1 0 calc(100% - 10px);
    height: auto; 
  }
}

@media (min-width: 98vh)  {
    .container {
        width:  90vh; 
        overflow: auto;
    }
     .child {
        width:auto;
        width:calc((90vh - (var(--n) - 1)*10px)/var(--n)); 
    
    } 
  }

.child img {
  vertical-align: middle;
  width: 100%; 
}

/* replace image with #ID on hover, has to be 1:1 square */
#img1:hover {
    content: url('./img/image1h.jpg');
}
#img2:hover {
    content: url('./img/image2h.jpg');
}
#img3:hover {
    content: url('./img/image3h.jpg');
}
#img4:hover {
    content: url('./img/image4h.jpg');
}
#img5:hover {
    content: url('./img/image5h.jpg');
}
#img6:hover {
    content: url('./img/image6h.jpg');
}
#img7:hover {
    content: url('./img/image7h.jpg');
}
#img8:hover {
    content: url('./img/image8h.jpg');
}
#img9:hover {
    content: url('./img/image9h.jpg');
}