body.glr-mod-open {
     overflow: hidden;
}
/* Grid holding the tight rows of 56px thumbnails */
 .gallery-grid {
     margin-bottom: 1em;
	 text-align:center;
}
/* Fixed sizing tailored specifically to your 56px thumbnail dimensions */
 .gallery-item {
     display: inline-block;
    width: 56px;
    transition: transform 0.2s ease;
    margin: 0 .5em 0 0;
}
 .gallery-item:hover {
     transform: translateY(-2px);
}
/* Compact wrapper tightly framing your asset sizes */
 .img-wrapper {
     position: relative;
     width: 56px;
     height: 56px;
     overflow: hidden;
     background: #f1f5f9;
     border-radius: 4px;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
 .gallery-item img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
/* Hidden description text under small 56px thumbs (since text won't fit inside 56px widths) */
 .gallery-item p {
     display: none;
}
/* Modal Architecture */
 .gallery-modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.75);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: opacity 0.3s ease;
}
 .gallery-modal.show {
     display: flex;
     opacity: 1;
}
 .glr-mod-content-wrapper {
     position: relative;
     width: 90%;
     max-width: 1200px;
     height: 80vh;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     touch-action: pan-y;
}
 .gallery-modal img.main-display {
     width: 100%;
     height: 100%;
     max-height: 100%;
     object-fit: contain;
     opacity: 0;
     user-select: none;
     -webkit-user-drag: none;
     transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
 .gallery-modal img.slide-in-right {
     transform: translateX(100%);
     opacity: 0;
}
 .gallery-modal img.slide-in-left {
     transform: translateX(-100%);
     opacity: 0;
}
 .gallery-modal img.active {
     transform: translateX(0);
     opacity: 1;
}
/* Overlays & Interface Elements */
 .glr-mod-vignette {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 160px;
     background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
     pointer-events: none;
     z-index: 1004;
     opacity: 0;
     transition: opacity 0.3s ease;
}
 .glr-mod-vignette.visible {
     opacity: 1;
}
 .glr-mod-spinner {
     display: none;
     position: absolute;
     width: 40px;
     height: 40px;
     border: 4px solid rgba(255,255,255,0.1);
     border-radius: 50%;
     border-top-color: #fff;
     animation: spin 0.8s linear infinite;
     z-index: 1001;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
 .hide-on-idle {
     transition: opacity 0.25s, visibility 0.25s;
     opacity: 1;
     visibility: visible;
}
 .gallery-modal.user-idle .hide-on-idle {
     opacity: 0;
     visibility: hidden;
}
 .glr-mod-close {
     position: absolute;
     top: 20px;
     right: 20px;
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;
     color: #fff;
     font-size: 30px;
     cursor: pointer;
     z-index: 1010;
     background: rgba(0,0,0,0.4);
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
}
 .glr-mod-nav {
     position: absolute;
     top: 0;
     height: 100%;
     width: 70px;
     color: white;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     user-select: none;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(to var(--nav-dir, right), rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
     text-decoration: none;
     z-index: 1005;
}
 .glr-mod-prev {
     left: 0;
     --nav-dir: right;
}
 .glr-mod-next {
     right: 0;
     --nav-dir: left;
}
 .glr-mod-nav.disabled {
     opacity: 0 !important;
     pointer-events: none;
}
 .glr-mod-caption {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     color: #fff;
     font-size: 18px;
     text-align: center;
     width: 80%;
     pointer-events: none;
     z-index: 1006;
     text-shadow: 0 1px 4px #000000cc;
     transition: opacity 0.2s ease;
}
 @media (max-width: 768px) {
     .glr-mod-nav {
         display: none;
    }
     .glr-mod-content-wrapper {
         width: 95%;
         height: 75vh;
    }
     .glr-mod-caption {
         font-size: 15px;
         bottom: 20px;
         width: 90%;
    }
}