.cpb[hidden], .cpb [hidden] { display: none !important; }
.cpb {
    --cpb-margin: 32px;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--cpb-margin);
    background: rgba(0, 0, 0, .75);
    overflow: auto;
}
.cpb__dialog { position: relative; flex: 0 1 auto; max-width: 100%; margin: auto; line-height: 0; }
.cpb .cpb__item, .cpb .cpb__item picture { display: block; line-height: 0; border: 0; text-decoration: none; }
.cpb .cpb__item img {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: min(1100px, calc(100vw - 2 * var(--cpb-margin)));
    max-height: calc(100vh - 2 * var(--cpb-margin));
    max-height: calc(100dvh - 2 * var(--cpb-margin));
    object-fit: contain;
    border: 0;
    margin: 0;
    padding: 0;
}
.cpb .cpb__close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font: 32px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.cpb .cpb__close:hover { background: #eee; color: #000; }
.cpb a:focus-visible, .cpb button:focus-visible { outline: 3px solid #ffcc40; outline-offset: 3px; }
@media (max-width: 767px) {
    .cpb { --cpb-margin: 16px; }
    /* Keep the close button inside the viewport on narrow screens. */
    .cpb .cpb__close { top: 4px; right: 4px; }
}