.lb-con.dk-bg {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 60;
    overflow: auto;
    pointer-events: none;
    transition: opacity .4s ease 0s, visibility 0s ease .4s;
    background: transparent;
}

.lb-con.dk-bg .lb-background {
    min-height: 100vh;
}

.lb-con .lb-background.bg-bx::before {
    opacity: 0.9;
    background-color: var(--black);
}

.lb-open main {
    filter: blur(10px);
}

.lb-background {
    width: 100%;
    height: 100%;
}

.lb-open .lb-con {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .4s ease 0s;
}

.lb-con .lb-box {
    max-width: 60rem;
    margin: 0 auto;
}

.lb-con .lb-cnt {
    position: relative;
    height: 80vh;
    max-height: 80vh;
    border: 5px solid var(--inner-bg);
    background-color: var(--main-bg-alt);
    overflow-x: hidden;
}

.lb-con .lb-cnt img {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    min-width: calc(100% + 2px);
    min-height: calc(100% + 2px);
    pointer-events: none;
}

.lb-con button[data-action="close"] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--text-alt);
    font-size: 1.22rem;
    z-index: 2;
    display: inline-flex;
    padding: .5rem;
    line-height: 1;
}

.lb-con .icn {
    font-size: 2rem;
}

@media screen and (max-width:699px) {
    .lb-con .lb-box {
        max-width: 80vw;
    }

    .lb-con .lb-cnt {
        max-height: 65vh;
        height: 65vh;
    }
}