.gallery{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:20px 0;

}

.thumb{

    width:100%;
    height:auto;

    object-fit:cover;

    cursor:pointer;

    border-radius:8px;

    transition:.2s;

}

#lightbox{

    display:none;

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.9);

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

    z-index:9999;

}

#lightbox-image {
    max-width: 90%;
    max-height: calc(100vh - 140px); /* ruimte reserveren voor thumbnails */
    object-fit: contain;
}

#close{

    position:absolute;
    top:15px;
    right:30px;

    color:white;
    font-size:40px;

    cursor:pointer;

}

#prev,
#next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:60px;

    cursor:pointer;

    user-select:none;

    padding:20px;

}

#prev{

    left:20px;

}

#next{

    right:20px;

}

#thumbstrip{

    position:absolute;

    bottom:15px;

    left:70px;
    right:70px;

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding:5px;

}

#thumbstrip img {

    object-fit:cover;

    cursor:pointer;

    opacity:.75;

    border:3px solid transparent;

    flex:0 0 auto;

}


#thumbstrip img.landscape {

    width:180px;
    height:120px;

}


#thumbstrip img.portrait {

    width:100px;
    height:150px;

}

#thumbstrip img.active{

    border-color:#ffffff;

    opacity:1;

}
#lightbox-title{

    position:absolute;

    top:15px;
    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:22px;

    font-weight:bold;

    text-align:center;

    max-width:80%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

#download {

    position:absolute;

    top:30px;
    right:80px;

    cursor:pointer;

    display:block;

}


#download img {

    width:35px;
    height:35px;

    filter: invert(1); /* maakt zwart SVG wit */
}


#download:hover img {

    opacity:.7;

}