/*==================== GALLERY PAGE STYLES ======================*/
/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-gallery) .page-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- GALLERY GRID --------------------*/
:where(.page-gallery) .gallery-item {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--bg-first-light);
}
:where(.page-gallery) .gallery-item img {width: 100%;height: 100%;object-fit: cover;object-position: center;transition: 0.4s ease;}
:where(.page-gallery) .gallery-item-sm {height: 337px;}
:where(.page-gallery) .gallery-item-lg {height: 698px;}
:where(.page-gallery) .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(147, 128, 72, 0);
    transition: 0.3s ease;
}
:where(.page-gallery) .gallery-item:hover::after {background-color: rgba(147, 128, 72, 0.35);}
:where(.page-gallery) .gallery-item:hover img {transform: scale(1.05);}
:where(.page-gallery) .gallery-item-zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--color-white-same);
    transition: 0.3s ease;
}
:where(.page-gallery) .gallery-item:hover .gallery-item-zoom {opacity: 1;}

/* Community gallery on the Network page (was an inline <style> in network.php) */
:where(.page-gallery) .community-gallery-grid .gallery-item {
    height: auto;
    aspect-ratio: 1 / 1;
}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 1200px) {
    :where(.page-gallery) .gallery-item-sm {height: 280px;}
    :where(.page-gallery) .gallery-item-lg {height: 584px;}
}
@media screen and (max-width: 991px) {
    :where(.page-gallery) .gallery-item-sm {height: 260px;}
    :where(.page-gallery) .gallery-item-lg {height: 260px;}
}
@media screen and (max-width: 767px) {
    :where(.page-gallery) .gallery-item-sm, :where(.page-gallery) .gallery-item-lg {height: 220px;}
}