.popup {
display: flex;
flex-wrap: wrap;
- align-items: end;
+ justify-content: space-evenly;
+ gap: 1em;
position: fixed;
left: 0;
top: 0;
+ max-width: 100%;
+ max-height: 100%; /* scroll */
margin: auto;
- max-height: 90%;
- max-width: 90%;
overflow: auto;
background: rgba(0, 0, 0, .8);
border: 1px solid #CCC;
+ z-index: 1;
}
-img.popup {
- height: 100%; /* max assuming landscape */
- width: auto; /* keep aspect */
+.popup img {
+ height: 20vh;
+ width: auto;
+}
+img {
+ max-width: 100%;
+ object-fit: contain;
}
h1 {