/* adapted from https://code-boxx.com/responsive-image-gallery-html-css/  */


/* (B) GALLERY WRAPPER */
.gallery {

/* (B1) GRID LAYOUT - 3 IMAGES PER ROW
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
*/

/* (B2) OPTIONAL WIDTH RESTRICT
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
*/
}

/* (C) GALLERY IMAGES */
.gallery img {
width: 150px;
height: 150px;
padding: 4px;
object-fit: contain;
position: relative;
}

/* (E) OPTIONAL ZOOM ON HOVER */
.gallery img:hover {
z-index: 2;
transform: scale(1.5);
/* linear | ease | ease-in | ease-out | ease-in-out */
transition: transform ease 0.3s;
}

/* (D) ON SMALL SCREENS - 2 IMAGES PER ROW */
@media only screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}

.gallery img:hover {
transform: none;
}
}

/* (F) FULLSCREEN MODE */
.gallery img.full {
position: fixed;
top: 0; left: 0; z-index: 999;
width: 100vw; height: 100vh;
object-fit: fit;
background: rgba(0, 0, 0, 0.7);
}
.gallery img.full:hover {
z-index: 999;
transform: none;
}