/* All the container information */

.container {

    display: grid;
    
    

    grid-template-rows: auto 300px auto auto auto auto;
    
    grid-template-areas:
    "navigation-section"
    "header"
    "content-section-top"  
    "content-section-middle"  
    "content-section-bottom"  
    "content-section-footer"  

   }

   
.photos1 {

    float: right;     
    margin: 20px;
    max-height: 35%;
    max-width: 35%;
    border-radius: 5px;
    min-height: 25%;
    min-width: 25%;
    filter: drop-shadow(1.25em .25em 1.25em rgb(1, 78, 39));
}

.photos2 {

    float: left;     
    margin: 20px;
    max-height: 35%;
    max-width: 35%;
    border-radius: 5px;
    min-height: 25%;
    min-width: 25%;
    filter: drop-shadow(1.25em .25em 1.25em rgb(1, 78, 39));
}

   
   /* Main Page Sections */
   
   .navigation-section {

    grid-area: navigation-section;
    
    
    }

    .header {

        grid-area: header;
       
        padding: 20px;

        background-image: url(../site-img/img.jpg);
        
        background-repeat: no-repeat;
        background-size: cover;
        
    }

    .content-section-top {

        display: flex;
        grid-area: content-section-top;
       
        padding: 20px;
        
        
    }

    .content-section-middle {

        grid-area: content-section-middle;
     
        padding: 20px;
        
    }

    .content-section-bottom {

        grid-area: content-section-bottom;
       
        padding: 20px;
    }

    .content-section-footer {

        display: flex;
        grid-area: content-section-footer;
     
        
    }


/* Nested Divs */
    
    
                    .correspondence {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;
                    }

                    .captions {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;

                    }

                    .story {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;
                    }