.cms-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.cms-gallery figure { margin: 0; min-width: 0; }
.cms-gallery a { display: block; overflow: hidden; border-radius: .75rem; }
.cms-gallery img { margin: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.cms-gallery a:hover img { transform: scale(1.035); }
.cms-gallery figcaption { padding: .75rem 0; font-size: .9rem; }
.glightbox-container .gslide-title { font-size: 1rem; line-height: 1.5; }
/* Site popup: pictures run edge to edge; text keeps the spacing set in the editor. */
.cms-welcome-modal .modal-body { padding: 0; }
.cms-welcome-content > :first-child { margin-top: 0; }
.cms-welcome-content > :last-child { margin-bottom: 0; }
.cms-welcome-content p:has(> img) { margin: 0; }
.cms-welcome-content p:has(> img) > br { display: none; }
/* A picture fills the width and fits the screen height, so no scrollbar opens a gap beside it. */
.cms-welcome-content img { display: block; width: 100% !important; height: auto; max-height: calc(100vh - 11rem); object-fit: cover; }
.cms-welcome-modal .modal-footer { padding: .5rem .75rem; }
/* Text blocks (no picture inside) keep a small inset so words never touch the window edge. */
.cms-welcome-content > :not(:has(img)):not(img) { margin: .75rem 1rem; }
.cms-welcome-text { display: block; padding: .75rem 1rem; }
.cms-content img { max-width: 100%; height: auto; }
.cms-content table { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .cms-gallery img { transition: none; } }

/* Embedded iframes (video, map ...) written in the editor never overflow the content column on phones. */
.page-body iframe {
    max-width: 100%;
}