.gallery {margin: 30px auto;}

@media (min-width: 1251px) {.gallery {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 1250px) {.gallery {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 900px) {.gallery {grid-template-columns: repeat(2, 1fr);}}

@media (min-width: 681px) {.gallery {display: grid; grid-gap: 30px 20px; gap: 30px 20px;}}
@media (max-width: 680px) {.gallery {display: block;} .card {margin: 0 auto 35px auto; max-width: 400px;}}

.card {border: 2px solid var(--color2); border-radius: 0px; overflow: hidden; background: var(--color2); display: flex; flex-direction: column; transition: .15s; content-visibility: auto; -webkit-tap-highlight-color: transparent;}
.card:hover {border: 2px solid #000; filter: saturate(120%) brightness(110%);}
.card, .card a {cursor: pointer; cursor: zoom-in;} /*use both for old browser support*/

.thumb {display: block; position: relative; width: 100%; height: 0;
padding-top: 130% /* aspect ratio of 4.5 / 3 , as in 3 / 4.5 = 0.6666 */; overflow: hidden; background: #FFF;
}
.thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/*This also works, but not in older Safari:
.thumb {display: block; aspect-ratio: 4.5 / 3; overflow: hidden; background: #FFF;}
.thumb img {width: 500px; height: 350px; width: 100%; height: 100%; object-fit: cover; display: block;}*/

.thumb.tall img {object-fit: contain;}

.galcap {display: grid; align-items: center; height: 100%; padding: 12px 15px 7px 15px; font-size: 16px; line-height: 1.45; text-align: center; background: var(--color2); color: #FFF;}

#lightbox {position: fixed; inset: 0; background: rgba(0,0,0,.89); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s ease; transition: opacity .15s ease, visibility .15s ease; touch-action: pan-y;}

#lightbox.show {opacity: 1; visibility: visible; pointer-events: auto;}

#lightbox img {max-width: 95vw; max-height: 80vh; display: block; position: relative; z-index: 1; transition: opacity .15s ease; transition: opacity .15s ease; cursor: grab; -webkit-user-drag: none; user-select: none; border-radius: 0px;}

#lightbox img:active {cursor: grabbing;}

#lightbox p {color: #FFF; margin-top: 12px; text-align: center; line-height: 1.4; position: relative; z-index: 1;}

.galcount,.galclose, .galnav {position: absolute; z-index: 10001; color: #FFF; background: rgba(0,0,0,.35); border: 0;}

.galcount {top: 15px; left: 15px; font-size: 12px; line-height: 1; padding: 7px 9px 5px 9px; border-radius: 0px;}
.galclose, .galnav {cursor: pointer; transition: background .15s ease; transition: background .15s ease;}

.galclose {top: 15px; right: 15px; font-size: 32px; line-height: 1; font-weight: 500; padding: 4px 6px 3px 6px; border-radius: 0px;}

.galnav {top: 42%; font-size: 42px; line-height: 1; padding: 2px 5px 9px 5px; z-index: 500; transform: translateY(-42%); }
.prev {left: 15px; border-radius: 0px;} .next {right: 15px; border-radius: 0px;}

.galclose, .prev, .next {transition: .15s;}
.galclose:hover, .prev:hover, .next:hover {color: #EBDECB;}