
.gallery {
    margin-top: .25em;
    display:flex;
    justify-content: center;
    flex-wrap: wrap !important;
}

.thumb, .thumb-active {
    /*padding-right: 5px;*/
    position: relative;
}
.thumb-img {
    /*border: 1px solid #ccc;*/
    position:relative;
    /*border:1px dashed red;*/
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    width: var(--thumb-width);
    height: var(--thumb-height);

    float:left;
    margin: var(--thumb-margin);
}
.thumb-active {
    pointer-events: none;
}
.thumb.disabled {
    filter: grayscale(1);
    pointer-events: none;
}

.thumb-active .marker {
    display: none;
}
.thumb.disabled .marker {
    display: none;
}

.thumb:hover {
    /*border: 1px solid #777;*/
    transform: scale(105%);
    /*z-index: 2;*/
}

.thumb-img>img {
    /*width: 100%;*/
    /*height: auto;*/
    flex-shrink:0;
    min-width:100%;
    min-height:100%;
    /*height: auto;*/
    /*width: 100%;*/
    /*object-fit: contain;*/
}
.btn-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;

}
/*btn-play:hover {
    border: 1px solid #777;
    transform: scale(105%);
    z-index: 1;
}*/
.btn-play>img {
    width: 2em;
    height: 2em;
    transform: translate(0,0);
    z-index: 1;
}
.img-footer {
    position: absolute;
    left: var(--thumb-margin);
    bottom: var(--thumb-margin);
    color: #fff;
    filter: drop-shadow(2px 2px 2px #000000b0);
    width: var(--thumb-width);
    height: 3em;
    text-align: left;
    display: flex;
    flex-direction: column-reverse;
    font-size: .8em;
}
.thumb:hover .date-time {
    background-color: #00000060;
}
.thumb:hover .img-title {
    background-color: #00000030;
    opacity: 1;
}
.date-time {
    transition: .5s;
    padding-left: .25em;
    padding-right: .25em;
    cursor: pointer;
}
.img-title {
    line-height: 1em;
    opacity: 0;
    transition: .5s;
    padding-left: .25em;
    padding-right: .25em;
}

.photo-id {
    position: absolute;
    right: 10%;
    top: 2%;
    color: #fff;
    filter: drop-shadow(2px 2px 2px #000000b0);
}

.fancybox__thumb {
    --fancybox-accent-color: #cfff36bd;
}
.fancybox__nav {
    --f-button-bg: #86945a6e;
    /*--f-button-width: 17px;*/
    /*--f-button-height: 17px;*/
    /*--f-button-stroke-width: 3;*/
}
