.image-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}.image-gallery>img{width:100%;height:auto;cursor:pointer}.image-gallery>img:first-child{grid-column:1 / -1}.image-gallery__viewer-wrapper{position:absolute;top:0;left:0;width:100%;height:100dvh;background-color:color-mix(in srgb,var(--light) 60%,transparent);display:none;justify-content:center;align-items:center}.image-gallery__viewer-wrapper .image-galley__viewer{display:flex;flex-direction:column;border-radius:5px;z-index:500;width:30%;background:#fff;padding:.5rem;gap:.5rem;box-shadow:0 0 15px #555}.image-gallery__viewer-wrapper .image-galley__viewer img{width:100%;height:auto}.image-gallery__viewer-wrapper .image-galley__viewer .viewer-controls{display:flex;justify-content:space-between;align-items:center}.image-gallery__viewer-wrapper .image-galley__viewer .viewer-controls>div{display:flex;align-items:center;gap:.5rem}.image-gallery__viewer-wrapper .image-galley__viewer .viewer-controls>div:first-child{justify-content:start}.image-gallery__viewer-wrapper .image-galley__viewer .viewer-controls>div:last-child{justify-content:end}.image-gallery__viewer-wrapper .image-galley__viewer .viewer-controls button{font-size:.8rem}