.julie-viewer { width: 100%; max-width: 100%; background: transparent; border: 1px solid #000; border-radius: .4rem; overflow: hidden; }
.julie-enlarge { display: block; position: relative; width: fit-content; max-width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; color: white; }
.julie-enlarge > img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(60vh, 640px); object-fit: contain; object-position: left center; }
.julie-enlarge > span { position: absolute; bottom: .6rem; right: .6rem; background: #000b; padding: .25rem .65rem; border-radius: .25rem; }
.julie-thumbnails { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .65rem; }
.julie-thumbnail { padding: 3px; border: 3px solid transparent; border-radius: .35rem; background: #eee; }
.julie-thumbnail img { width: 100%; height: 100px; object-fit: contain; object-position: left center; display: block; }
.julie-thumbnail[aria-pressed="true"] { border-color: #337ab7; background: #dbeafa; }
.julie-thumbnail:focus-visible, .julie-enlarge:focus-visible { outline: 3px solid #337ab7; outline-offset: 3px; }
.julie-lightbox { width: 96vw; max-width: 1500px; max-height: 96vh; background: white; color: #222; border: 0; border-radius: .4rem; padding: 1rem; }
.julie-lightbox::backdrop { background: #000d; }
.julie-lightbox > img { display: block; width: 100%; height: 80vh; object-fit: contain; object-position: left center; }
@media (max-width: 480px) { .julie-lightbox { padding: .5rem; } .julie-lightbox .btn { padding: .35rem .5rem; } }