html.rw-size-lightbox-open,
body.rw-size-lightbox-open {
overflow: hidden !important;
}
body.rw-site .rw-size-lightbox-trigger {
cursor: zoom-in;
}
body.rw-site .rw-size-lightbox {
inset: 0;
opacity: 0;
pointer-events: none;
position: fixed;
transition: opacity 180ms ease;
visibility: hidden;
z-index: 100000;
}
body.rw-site .rw-size-lightbox.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
body.rw-site .rw-size-lightbox__backdrop {
background: rgba(12, 12, 12, 0.86);
inset: 0;
position: absolute;
}
body.rw-site .rw-size-lightbox__dialog {
align-items: center;
display: flex;
inset: clamp(14px, 3vw, 36px);
justify-content: center;
pointer-events: none;
position: absolute;
}
body.rw-site .rw-size-lightbox__stage {
align-items: center;
background: #fff;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
display: flex;
justify-content: center;
max-height: 100%;
max-width: min(1240px, 100%);
overflow: auto;
pointer-events: auto;
}
body.rw-site .rw-size-lightbox__image {
display: block;
height: auto;
max-height: calc(100vh - clamp(28px, 6vw, 72px));
max-width: 100%;
object-fit: contain;
width: auto;
}
body.rw-site .rw-size-lightbox__close {
align-items: center;
appearance: none;
background: #fff;
border: 0;
border-radius: 0;
color: #111;
cursor: pointer;
display: flex;
font: inherit;
font-size: 28px;
font-weight: 300;
height: 44px;
justify-content: center;
line-height: 1;
margin: 0;
padding: 0;
pointer-events: auto;
position: fixed;
right: clamp(14px, 3vw, 36px);
top: clamp(14px, 3vw, 36px);
width: 44px;
z-index: 2;
}
body.rw-site .rw-size-lightbox__close:hover,
body.rw-site .rw-size-lightbox__close:focus-visible {
background: #111;
color: #fff;
}
@media (max-width: 767px) {
body.rw-site .rw-size-lightbox__dialog {
inset: 58px 10px 12px;
}
body.rw-site .rw-size-lightbox__stage {
max-width: 100%;
width: 100%;
}
body.rw-site .rw-size-lightbox__image {
max-height: calc(100vh - 72px);
width: 100%;
}
body.rw-site .rw-size-lightbox__close {
height: 40px;
right: 10px;
top: 10px;
width: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
body.rw-site .rw-size-lightbox {
transition: none;
}
}