.picture-gallery{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.helpdesk .picture-gallery{display:grid;gap:.5rem;max-width:fit-content}.main-image{width:100%;max-width:37.5rem;cursor:pointer;background:transparent;border:none;padding:0;border-radius:.5rem;box-shadow:0 0 .625rem var(--shadow-1)}.main-image img{width:100%;height:auto;border-radius:.5rem}.helpdesk .main-image img{border-radius:.375rem;display:block}.thumbnails{display:flex;gap:.5rem}.helpdesk .thumbnails{display:grid;gap:.375rem;grid-template-columns:repeat(auto-fill,minmax(3.75rem,1fr))}.thumbnails img{aspect-ratio:1/1;object-fit:cover}.helpdesk .thumbnails img{width:100%;height:3.75rem;object-fit:cover;border-radius:.375rem;display:block}.thumbnails button{width:3.75rem;height:3.75rem;object-fit:cover;background:transparent;border:none;padding:0;border-radius:.5rem;cursor:pointer;transition:transform .3s ease}.thumbnails button:hover{box-shadow:0 0 .625rem var(--shadow-1)}.thumbnails button.selected{box-shadow:0 0 .625rem var(--shadow-2)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background:var(--overlay-1);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{position:relative;max-width:90%;max-height:90%;display:flex;align-items:center}.modal img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:.5rem}.modal-backdrop .close{position:absolute;top:.5rem;right:.5rem;background:none;font-size:2rem;color:var(--text-3);cursor:pointer;width:1.5625rem;height:1.5625rem;border-radius:50%;border:.0625rem solid var(--border-1);transition:color .3s ease;display:flex;justify-content:center;align-items:center;margin:0;-webkit-user-select:none;user-select:none}.modal-backdrop .close:hover{color:var(--text-1);border-color:var(--text-1);background:var(--surface-1);box-shadow:0 0 .625rem var(--shadow-1)}.modal-backdrop .prev,.modal-backdrop .next{position:absolute;top:50%;transform:translateY(-50%);height:18.75rem;padding:0 1rem;background:transparent;border:none;border-radius:.5rem;font-size:2.5rem;color:var(--text-3);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color,color .3s ease}.modal-backdrop .prev{left:.5rem}.modal-backdrop .next{right:.5rem}.modal-backdrop .prev:hover,.modal-backdrop .next:hover{color:var(--text-1);background:var(--shadow-2);box-shadow:0 0 .625rem var(--shadow-1)}
