body {
    background-color: #f2d6a27f;   
}

/*typography*/

h1 {
    font-family: "Playfair Display", "serif";
    font-weight: 800;
    font-size: clamp(2rem, 2vw + 2.25rem, 5rem);
    padding-bottom: 0.3em;
    text-align: center;
    color:#591902; 
}

h3 {
    font-family: "Playfair Display", "serif";
    font-size: normal;
    font-weight: 500;
    line-height: 0.8;
    color:#591902;
    padding-bottom: 0.4em;
    padding-top:.8em;
    
}

p {
    font-family: "Petrona", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#591902;
    padding-bottom:1.5em; 
}


.header > p {
    font-family: "Petrona", "serif";
    text-align: center;
    color: #591902;
}

.text > :nth-child(1) {
    font-weight: 700;
    padding-top: 1em;
    padding-bottom: 2em;
}

/*list styling */

li  {
    font-family: "Petrona", sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#591902;
    padding-bottom:.5em;
    list-style: none;
    text-decoration: underline;
}

a {
    text-decoration: none;   
}
a:hover {
    color: #325955;
    font-weight: 700;
    text-decoration: underline;
}

/*footer styling */

.footer {
    background-color:#260801;      
}

.footer_text {
    width: fit-content;
    margin:0 auto;
    text-align: center;
    padding:1em; 
} 
.footer_text > p {
    color:#f2d6a27f;     
}   

    
@media screen and (min-width: 320px){ 
    section:not(.banner ,.footer,.header) {
        width: min(90%,40em);
        margin:0 auto;   
    } 

    .grid-container {
        display: grid; 
        grid-template-columns: auto;
        gap:1em;           
    }
    p,li {
        font-size: 1em;
    }
    .header > p {
        font-size: 1.3em;
    }
    .text > :nth-child(1) {
        font-size: 1.15em;    }
    
    .banner {
        display: grid;
        grid-template-columns: auto auto auto auto;
        padding:1em 1em 4em 1em;  
        background-color:#260801;
    }

    .img_banner {  
        position: relative;   
        border: 4px solid #260801 ;  
    }

    .img1 {
        left:1.5em;
        z-index:1
    }

    .img2, .img4 {
        top:2.5em;
    }

    .img2 {
        left:0.5em;
    }

    .img3 {
        right:0.5em;
        z-index: 1
    }
    .img4 {
        right:1.5em;   
    }

    .gallery_aside {
        display: flex;
        gap: 2em;
    }

    .gallery_aside > div {
        flex:1    
    }

    iframe {
        width: 100%;  
    }
    .footer {
        margin-top: 1.2em;
    }
}

@media screen and (min-width: 768px) {
    section:not(.banner ,.footer,.header) {
        width: min(95%,40em);
    } 

    p,li {
        font-size: 1.1em;
    }
    .header > p {
        font-size: 1.7em;
    }
    .text > :nth-child(1) {
        font-size: 1.2em;
    }
    .grid-container {
        display: grid; 
        grid-template-columns:auto auto;            
    }

    .gallery_aside {
        display: flex;
        flex-direction: column;
        gap: 1em;
        
    }

    .gallery_aside > div {
        flex-basis:75%; 
    }

    .span-2 {
        grid-column: span 2;
    }
    

    iframe {
        display: block;
        width: 100%;
    }

    .footer {
        margin-top: 2em;
    }
    
}