/*GALLERY WRAPPER */
.gallery {
    /*GRID LAYOUT - 3 IMAGES PER ROW */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;

    /*OPTIONAL WIDTH RESTRICT */
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
/*ON SMALL SCREENS - 2 IMAGES PER ROW */
@media only screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*GALLERY IMAGES */
.gallery img {
    width: 100%;
    height: 180px; /* optional */
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    object-fit: cover; /* cover | contain | fill | scale-down */
}
    /*ZOOM ON HOVER */
    .gallery img:hover {
        z-index: 9;
        transform: scale(1.3);
        transition: transform ease 0.5s; /* linear | ease | ease-in | ease-out | ease-in-out */
    }

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

/* (X) NOT IMPORTANT
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
} */