photo-gallery-styles

 /*  This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU General Public License for more details.
 
     You should have received a copy of the GNU General Public License
     along with this program. If not, see <https://www.gnu.org/licenses/>. */
 
 body {
   background: #15151a;
   color: white;
   font: 14pt sans-serif;
 
   margin: 0;
   padding: 14pt;
 }
 
 a {
   color: white;
 }
 
 nav {
   margin-bottom: 14pt;
   font-weight: bold;
 }
 
 nav img {
   position: relative;
   top: .4rem;
 }
 
 #gallery {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 #gallery li {
   display: block;
   margin-top: 7pt;
   border: solid 3.5pt white;
 }
 
 #gallery li::first-child {
   margin-top: 0;
 }
 
 #gallery li img {
   display: block;
   width: 100%;
 }
 
 figure {
   margin: 0;
 }
 
 figcaption {
   margin-top: 14pt;
   text-align: center;
   font-style: italic;
 }
 
 #picture-container {
   display: flex;
 }
 
 #picture-container img {
   max-width: 100%;
   margin: 0 auto;
   border: solid white 3.5pt;
 }
 
 footer {
   margin-top: 14pt;
   text-align: center;
 }
 
 @media (orientation: landscape) and (min-width: 800px) {
   body {
     padding: 14pt 15vw;
   }
 
   #gallery {
     display: flex;
     flex-wrap: wrap;
     gap: 7pt;
   }
 
   #gallery li {
     margin: 0;
     height: 200px;
     position: relative;
     flex: 1 1 auto;
   }
 
   #gallery li img {
     object-fit: cover;
     height: 100%;
     vertical-align: middle;
   }
 
   #gallery::after {
     content: "";
     flex-grow: 999;
   }
 
   #picture-container img {
     max-height: 90vh;
   }
 }