.gallery-container{max-width:1200px;margin:0 auto;padding:20px}.gallery-grid{flex-wrap:wrap;gap:20px;display:flex}.gallery-item{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:calc(25% - 20px);padding:0;transition:transform .3s,outline .2s;position:relative;overflow:hidden;box-shadow:0 4px 8px #0000001a}.gallery-item:focus-visible{outline-offset:4px;outline:4px solid #0070f3}@supports not (aspect-ratio:1){.gallery-item:before{content:"";padding-top:100%;display:block}}.gallery-image{object-fit:cover;border-radius:8px;width:100%;height:100%;position:absolute;top:0;left:0}.gallery-item:hover{transform:scale(1.02)}.close-overlay{color:#fff;cursor:pointer;z-index:1001;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:2rem;transition:background .2s;display:flex;position:absolute;top:20px;right:20px}.close-overlay:hover{background:#ffffff4d}.close-overlay:focus-visible{outline-offset:4px;outline:2px solid #fff}.nav-button{color:#fff;cursor:pointer;z-index:1001;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:3rem;transition:background .2s,transform .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.nav-button:hover{background:#ffffff4d;transform:translateY(-50%)scale(1.1)}.nav-button:focus-visible{outline-offset:4px;outline:2px solid #fff}.nav-button.prev{left:20px}.nav-button.next{right:20px}.overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.overlay-content{max-width:90%;max-height:90%;position:relative}.enlarged-image{border-radius:8px;width:100%;height:auto;transition:opacity .3s;box-shadow:0 4px 8px #0000001a}.enlarged-image.loading{opacity:0}.spinner{z-index:1002;border:5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:50px;height:50px;animation:1s ease-in-out infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{to{transform:translate(-50%,-50%)rotate(360deg)}}@media screen and (max-width:800px){.gallery-item{flex:calc(50% - 20px)}}@media screen and (max-width:600px){.gallery-item{flex:100%}}