:root {
            
            --img-width: 300px;
        }

body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #ffffff;
        }

.controls {
            margin-bottom: 30px;
            background: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            width: 100%;
        }

.img-container {
            width: var(--img-width);
            transition: width 0.1s ease;
        }

img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            object-fit: cover;
        }

label {
            font-weight: bold;
            margin-right: 10px;
        }

/* MOBILE ONLY (added 2026-09-18). redesign.css makes the body a flex column
   (.wl-scope{display:flex;flex-direction:column}) so the shared header, page
   content and footer stack full width. The `body{display:flex; align-items:
   center}` rule above (legacy per-page CSS, loaded after site.css) keeps the
   column but adds align-items:center, which makes every child shrink-wrap to
   its own content width instead of filling the viewport. The header's content
   is ~496px wide, so at phone widths it overflows to the right and the page
   zooms out. Put align-items back to stretch below 768px and drop the body
   padding that the full-width header must not have. Desktop is unchanged. */
@media (max-width: 768px) {
    body.wl-scope {
        align-items: stretch;
        padding: 0;
    }
    .controls,
    .gallery {
        padding-left: 16px;
        padding-right: 16px;
    }
    .img-container {
        width: 100%;
        max-width: var(--img-width);
    }
}