.lightbox {
    text-align: center;
    position: fixed;
    width: 100vw;
    top: 0;
    padding-top: 8rem;
    z-index: 50;
    height: 100vh;
    background: #111827d6;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: 200ms;
    overflow: scroll;
}

.lightbox_active{
    opacity: 1;
    pointer-events: initial;
}

.lightbox-container {
    text-align: center;
    padding: var(--xs);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    transition: 200ms;
    transform-origin: center center;
    max-width: 100%;
}

.lightbox-content {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    gap: var(--xs);
    padding: var(--md);
    border-radius: var(--rounded);
    transition: all 200ms;
    box-shadow: var(--drop-shadow-medium);
    background: var(--white);
    margin-bottom: var(--sm);
    text-align: left;
}

.close-lightbox {
    display: flex;
    margin: 0 auto;
    background: var(--bg-dark);
    color: var(--white);
    border-radius: var(--rounded-full);
    aspect-ratio: 1 / 1;
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    font-size: var(--sm);
    width: calc(var(--sm)* 1.5);
    align-items: center;
    justify-content: center;
}

.lightbox-bg {
    width: 100%;
    height: 100%;
    inset: 0;
    content: "";
    display: block;
}