/** * Image popup injected into by popup.js: dimmed overlay, centered image, * round close. Depends on global tokens (var(--ssr-*)). */ .ssr-popup { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); } .ssr-popup__container { display: flex; align-items: center; justify-content: center; height: 100vh; } .ssr-popup__image-only { display: flex; align-items: flex-start; padding: 60px 35px; } .ssr-popup__image { max-width: 100%; max-height: calc(100vh - 120px); cursor: pointer; } .ssr-popup__close { position: relative; top: -15px; right: 15px; display: inline-flex; padding: 0; cursor: pointer; background: #000; border: 0; border-radius: 50%; } .ssr-popup__close .ssr-icon { color: #fff; opacity: .8; } @media (max-width: 768px) { .ssr-popup__image-only { padding: 30px 25px; } .ssr-popup__image { max-height: calc(100vh - 60px); } .ssr-popup__close { top: -42px; right: 36px; } }