.gallery, .imgsimple { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; width:100%;}
.img1 { flex:0 0 60%; max-width:60%; box-sizing:border-box;}
.narrow { flex:0 0 40%; max-width:40%; box-sizing:border-box;}
.portrait { flex:0 0 33.33%; max-width:33.33%; box-sizing:border-box;}
.gallery-fig { position:relative; margin:0; padding:0; cursor:pointer;}
.gallery-fig img { display:block; width:100%; height:auto;}
.gallery-fig figcaption { text-align:center; padding:6px 4px; font-size:14px; line-height:1.3;}
.gallery-item { transition:transform 0.2s;}
.gallery-item:hover { opacity:0.8;}
.modal { display:none; position:fixed; z-index:1000000; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); justify-content:center; align-items:center;}
.modal-content { display:block; max-width:90vw; max-height:80vh; width:auto; height:auto; object-fit:contain;}
#caption { position:absolute; bottom:20px; left:0; width:100%; color:#fff !important; text-align:center; padding:10px 20px; font-size:16px; box-sizing:border-box;}
.nav-button { position:absolute; top:50%; transform:translateY(-50%); background-color:rgba(0,0,0,0.5); color:#fff; cursor:pointer; font-size:30px; font-weight:bold; border:none; padding:10px 16px; z-index:10;}
#prevBtn { left:10px;}
#nextBtn { right:10px;}

@media only screen and (max-width:768px){ .img1, .narrow, .portrait { flex:0 0 50%; max-width:50%;} }
@media only screen and (max-width:480px){ .img1, .narrow, .portrait { flex:0 0 100%; max-width:100%;} }