#lightbox
{
    position: fixed;
    inset: 0;

    /* opacity: 0; */
    visibility: hidden;
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(13, 13, 14, 0.4) 90%,
    rgba(43, 4, 66, 0.12) 100%
    );

      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);

    transition:
        backdrop-filter .3s ease,
        -webkit-backdrop-filter 0.3s ease;

    z-index: 1000;
}

#lightbox.open
{
    display: flex;
    pointer-events:auto;
    visibility: visible;
    backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
}

#lightbox-content
{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1rem;

    max-width: 98vw;
    max-height: 98vh;

     pointer-events: none;
}

#lightbox-image,
.lightbox-thumb
{
    pointer-events: auto;
}

#lightbox-image
{
    border-radius: 6px;

    /* box-shadow: 0 8px 22px rgba(0,0,0,0.6); */

    max-width: 98vw;
    max-height: 80vh;

    width: auto;
    height: auto;
}

#lightbox-thumbs
{
    display: flex;
    flex-direction: row;
    gap: 0.5rem;

    max-width: 98vw;

    overflow: visible
}

.lightbox-thumb
{
    height: 80px;
    width: auto;

    border-radius: 6px;
    cursor: pointer;
}

.lightbox-thumb.selected{
 transform: scale(1.1); 
      box-shadow:
        0 0 0 2px var(--col_div),
        2px 4px 2px rgba(0,0,0,0.3);
}

.gallery-grid
{
    position: relative;
    display: grid;

    background-color: white;

    grid-template-columns: repeat(
        auto-fill,
        minmax(300px, 1fr)
    );
    gap: clamp(0.5vw, 0.5vw, 1rem);
    padding: 4px;
    margin: 4px;
}

.gallery-thumb
{
    display: block;

    width: 100%;
    height: 250px;

    object-fit: cover;

    /* border-radius: 8px; */

    cursor: pointer;

    transform: scale(1);

        transition:
        transform 0.1s ease-out,
        box-shadow 0.1s ease-out;

    cursor:pointer;

        box-shadow:
        0px 0px 0px rgba(0, 0, 0, 0.10);
}

.gallery-thumb:hover
{
    transform: scale(1.02);
    box-shadow:
    3px 6px 0px rgba(0, 0, 0, 0.10);
    transition-timing-function: cubic-bezier(0.3, 1, 0.6, 1.5);
  }