.gallery-wrapper .gallery-title h1,
.gallery-wrapper .gallery-title h2,
.gallery-wrapper .gallery-title h3,
.gallery-wrapper .gallery-title h4 { color: var(--text-color); }
.gallery-wrapper .gallery-images { display: grid; grid-column-gap: 20px; grid-row-gap: 40px; }
.gallery-wrapper .gallery-images > a { border: solid 1px var(--octonary-color); }
.gallery-wrapper .gallery-images > a > span.gallery-image { display: block; position: relative; }
.gallery-wrapper .gallery-images > a > span.gallery-image:after { content: ''; opacity: 0; background-image: url("../../img/search_icon_large.png"); background-position: center center; background-repeat: no-repeat; z-index: 10; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.3); transition: 0.3s linear; }
.gallery-wrapper .gallery-images > a > span.gallery-image > img { aspect-ratio: 1; object-fit: cover; max-width: 100%; width: 100%; height: auto; }
.gallery-wrapper .gallery-images > a > span.gallery-image-desc { margin-top: 12px; display: block; font-size: 1.05rem; }

@media (pointer:fine) {
    .gallery-wrapper .gallery-images > a:hover span.gallery-image:after { opacity: 1; transition: 0.3s linear; }
}

@media (max-width:1200px) {
    .gallery-wrapper .gallery-images { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width:1023px) {
    .gallery-wrapper .gallery-images { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width:600px) {
    .gallery-wrapper .gallery-images { grid-template-columns: repeat(1, 1fr) !important; }

    /*@media (pointer:coarse) {
        .gallery-wrapper .gallery-images { display: flex; scroll-snap-type: x mandatory; justify-content: flex-start; flex-direction: row; overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; }
        .gallery-wrapper .gallery-images > a { flex: none; scroll-snap-align: start; }
        .gallery-wrapper .gallery-images > a { max-width: 380px; }
    }*/
}

@media (max-width:480px) {
    @media (pointer:coarse) {
        .gallery-wrapper .gallery-images > a { max-width: 300px; }
    }
}

@media (max-width:376px) {
    @media (pointer:coarse) {
        .gallery-wrapper .gallery-images > a { max-width: 269px; }
    }
}