body {background-color: var(--c-bg2);}

.prevCategories {
    display:flex;gap:1vh;margin: 2.5% 10%;width: 80%;
}
.category-link {
    padding: 0.5vh 1vh;border-radius: 1vh;background-color: var(--c-bg);
    color: var(--c-white);text-decoration: none;text-transform: capitalize;
}
.category-link:last-of-type {background-color: var(--c-yellow);color: var(--c-bg);}

.gallery-categories {
    display:grid;grid-template-columns: repeat(3, 1fr);gap: 4vh;
    width: 80%;margin: 2.5% 10%;
}
.gallery-categories .in-grid-wrap {position:relative;overflow:hidden;display:block;height:100%;}

.gallery-category {
    height:24vh;border-radius:2vh;background-color: var(--c-black);
    overflow: hidden;cursor: pointer;transition: box-shadow 0.2s ease-in-out;
}
.gallery-category-cover {
    width:100%;height:100%;object-fit: cover;object-position: center;
    z-index:1;position:relative;border-radius:2vh;transition:transform 0.3s ease-in-out;
}
.gallery-category .in-grid-wrap::before, .gallery-category-h::before {
    position:absolute;top:0;left:0;width:100%;height:100%;
    content:"";background-color: var(--c-bg);opacity:0.5;z-index:3;
}
.gallery-category .in-grid-wrap::before {border-radius:2vh;}
.gallery-category-content {
    position:absolute;bottom:2vh;left:2vh;width: calc(100% - 4vh);z-index:10;
}

.hover-click {height:0px;overflow:hidden;transition:all 0.3s ease-in-out;}
.gallery-category h1 {transition: color 0.3 ease-in-out;}


.gallery-category:hover {box-shadow: 0 4px 10px 0 var(--s2-yellow);}
.gallery-category:hover .gallery-category-cover {transform: scale(1.1);}
.gallery-category:hover h1 {color: var(--c-yellow) !important;}
.gallery-category:hover .hover-click {height:14px;margin-top:6px;}


.gallery-images {
    display:grid;grid-template-columns: repeat(3, 1fr);gap: 4vh;
    width: 80%;margin: 2.5% 10%;
}
.gallery-image-in {
    width:100%;position:relative;height: 30vh;overflow:hidden;cursor:pointer;
    border-radius: 2vh;background-color: black;
}
.gallery-image-in img {
    width:100%;height:100%;object-fit:cover;object-position:center;position:relative;
    display:block;margin:0;border-radius: 2vh;
    transition: transform 0.3s ease-in-out;
}
.gallery-image-in:hover img {transform: scale(1.1);}

.image-overlay {
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:900;
    background-color: rgba(0,0,0,0.3);display:none;
}
.image-in-overlay {
    position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
    max-width:80%;max-height:80%;
}
.image-overlay.visible {display:block;}




/* Categories open */
.bg2 {background-color: var(--c-bg2);overflow:auto;height:auto;}
.gallery-category-h {
    height: 40vh !important;
}
.gallery-category-wrap {
    width:100%;height:100%;object-fit: cover;object-position: center;
    z-index:1;position:relative;
}
.category-title {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:5;}
section {width: 80%;padding:5vh 10%;}

.gallery-list-img {
    display:grid;grid-template-columns: repeat(4, 1fr);gap: 3vh;
    width: 100%;
}
.gallery-img-wrap {
    width:100%;aspect-ratio: 16 / 9;overflow:hidden;border-radius:2vh;cursor:pointer;
}
.gallery-img-wrap img {height:100%;width:100%;transition:transform 0.3s ease-in-out;}
.gallery-img-wrap:hover img {transform:scale(1.1);}


.img-zoom {position:fixed;top:0;left:0;z-index:500;display:none;height:100%;width:100%;}
.img-zoom-bg {
    position:absolute;top:0;left:0;width:100%;height:100%;background-color: var(--c-bg);
    opacity:0.8;
}
.img-zoom img {
    position:absolute;max-height:100%;max-width:100%;z-index:3;
    top:50%;left:50%;transform: translate(-50%, -50%);
}



@media (max-width: 980px) {
    .gallery-categories {grid-template-columns: 100%;gap:4vh;}
    .gallery-images {grid-template-columns: 100%;gap:4vh;}
    .gallery-image-in {height: auto;}

    .image-overlay {background-color: rgba(0,0,0,0.5);}
    .image-overlay.visible {backdrop-filter: blur(6px);}
    
    .image-in-overlay {max-width:90%;max-height:80%;}
}