.gallery {margin: 30px auto;}

@media (min-width: 1451px) {.gallery {grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));}}
@media (max-width: 1450px) {.gallery {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}}
@media (max-width: 800px) and (min-width: 721px) {.gallery {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}}

@media (min-width: 721px) {.gallery {display: grid; grid-gap: 30px 20px; gap: 30px 20px;}}
@media (max-width: 720px) {.gallery {display: block;} .card {margin-bottom: 25px;}}

.card {border: 2px solid #DCC4A3; border-radius: 7px; overflow: hidden; background: #DCC4A3; display: flex; flex-direction: column; transition: .15s; content-visibility: auto; -webkit-tap-highlight-color: transparent;}
.card:hover {border: 2px solid #9C733B; 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: 66.66% /* 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 {background: #DCC4A3; padding: 12px 15px 7px 15px; font-size: 16px; line-height: 1.5; text-align: center; /*bottom align: margin-top: auto;*/}

#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: 7px;}

#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: 4px;}
.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: bold; padding: 4px 6px 3px 6px; border-radius: 5px;}

.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: 10px 2px 2px 10px;} .next {right: 15px; border-radius: 2px 10px 10px 2px;}

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