/* All the container information */

.container {

    display: grid;
    
    

    grid-template-rows: auto 300px auto auto auto auto auto auto;
    
    grid-template-areas:
    "navigation-section"
    "header"
    "content-section-top"  
    "content-section-middle" 
    "content-section-middle-b" 
    "content-section-middle-c"
    "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%;
    
}

.photos2 {

    float: right;     
    margin: 20px;
    max-height: 25%;
    max-width: 25%;
    border-radius: 5px;
    min-height: 25%;
    min-width: 25%;
    
}

   
   /* 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-middle-b {

        grid-area: content-section-middle-b;
     
        padding: 20px;
        
    }
    
    
    .content-section-middle-c {

        grid-area: content-section-middle-c;
     
        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;
                    }


                    .next-captions-links ul li{

                        font-size: larger;
                            color: #ec9b70;
                            margin: auto;
                            text-decoration: none;
                            float:center;
                            text-align: center;
                        
                        }
                        
                        .next-captions-links li a {
                        
                            font-size: larger;
                                color: #ec9b70;
                                margin: auto;
                                text-decoration: none;
                            text-align: center;
                            }
                            
                        
                        
                        .next-captions-links ul :hover {
                        
                                font-size: 20px;
                                    color: #dfd4ce;
                                   
                                
                                }