/* ---------- General layout ----------
   (kept unchanged) */
.container{
    display:grid;
    margin:auto;
    max-width:625px; max-height:100%;
    height:100vh;
    grid-gap:.05rem;
    grid-template-columns:1fr;
    grid-template-areas:
        "main"
        "nav"
        "content1"
        "content2"
        "content3"
        "content4"
        "footer";
}
body{background:url(vic2.png) no-repeat center center fixed;}
a{color:white; text-decoration:none; font-size:20px; font-family:sans-serif;}
nav{grid-area:'nav'; margin:auto; word-spacing:15px;}
#content1,#content2,#content3,#content4{
    grid-area:'content1';
    margin:auto;
    box-shadow:10px 0 10px rgba(0,0,0,.5);
}
footer{grid-area:footer;font:normal 12px Arial;color:silver;margin:auto;padding:20px 0 15px;}

/* ---------- Header & Nav ----------
   Remove the unwanted gaps */
#main{margin-bottom:0;text-align:center;}
nav{margin-top:0;}

/* ---------- Banner image ----------
   (kept unchanged) */
#main a{display:inline-block;}
#main img{max-width:520px;height:auto;}

/* ---------- Photo grid for gallery page ----------
   Use flex-wrap so every row has exactly 5 images, no gaps. */
.photography .photo-grid{
    display:flex;
    flex-wrap:wrap;
}
.photography .img-wrapper{
    width:20%;            /* 5 × 20 % = 100 % of the row */
    padding:0;            /* no spacing between cells */
    box-sizing:border-box;
}

/* ---------- Optional size helpers ----------
   (if you still want to vary column spans) */
.photography .size-1{grid-column:span 1;}
.photography .size-2{grid-column:span 2;}
.photography .size-3{grid-column:span 3;}
.photography .size-4{grid-column:span 4;}

/* ---------- Image transitions ----------
   (kept unchanged) */
.img-wrapper{
    position:relative;
    opacity:1;
    transition:opacity .7s ease;
}
.img-wrapper img{
    width:100%; height:auto;
    transform-origin:center;
    transition:transform .8s ease;
}
.img-wrapper:hover img{position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(.52);z-index:10;
    pointer-events:none;}
.img-wrapper:hover ~ .img-wrapper{opacity:0;}

/* ---------- Responsive tweaks ----------
   (kept unchanged) */
@media only screen and (max-width:500px){
    .container{
        grid-template-columns:1fr;
        grid-template-rows:.5fr .02fr .5fr .5fr .5fr .5fr .08fr;
        grid-template-areas:
            "main"
            "nav"
            "content1"
            "content2"
            "content3"
            "content4"
            "footer";
    }
}