/* About Us Page Specific Styles */

/* Inline high-priority fix: force 3 columns in About Us sidebar gallery */
#media_gallery-2 #gallery-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#media_gallery-2 #gallery-3 .gallery-item {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

#media_gallery-2 #gallery-3 .gallery-icon {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#media_gallery-2 #gallery-3 img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
}

@media (max-width: 600px) {
    #media_gallery-2 #gallery-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Defensive overrides: some global theme CSS may still inject inline-block + padding.
   Ensure our gallery items fill the grid cells fully and images are crisp. */
#media_gallery-2 #gallery-3.gallery.gallery-size-thumbnail .gallery-item {
    padding: 0 !important;
    max-width: 100% !important;
}

/* If for some reason grid fails (very old browser), fall back to flex */
@supports not (display: grid) {
    #media_gallery-2 #gallery-3 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    #media_gallery-2 #gallery-3 .gallery-item {
        flex: 0 0 calc(33.333% - 6px) !important;
        aspect-ratio: 1/1 !important;
    }
}

/* Increase perceived size slightly on high-DPI screens by reserving min size */
#media_gallery-2 #gallery-3 .gallery-item { min-width: 80px !important; }

/* Smooth fade-in already handled inline; ensure no unexpected shrinking */
#media_gallery-2 #gallery-3 img { transform: none !important; }