:root {
    --gallery-zoom-transition: 300ms ease;
}

/* || GALLERY */  

/* https://webdesign.tutsplus.com/build-an-interactive-image-gallery-with-html-css-and-javascript--cms-107881t */

.gallery-container {
    display: flex;
    flex-flow: wrap;
    margin: auto;
}

.gallery-item {
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 14 / 12;
    border: solid .1px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  -moz-transition: all var(--gallery-zoom-transition); 
  -o-transition: all var(--gallery-zoom-transition); 
  transition: all var(--gallery-zoom-transition);
  -webkit-transition: all var(--gallery-zoom-transition);
}

.gallery-item img:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Mobile settings */
.gallery-container {
  gap: 30px;
}
.gallery-item {
    width: 100%;
}

/* Tablet settings */
@media all and (min-width: 600px) {
    .gallery-item {
        flex: 45%;
    }
}
/* Desktop settings */
@media all and (min-width: 992px) {
    .gallery-container {
        gap: 30px;
    }
}