@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Poppins';
}
ul,li{
    padding:0;
    list-style-type: none;
}

.grid-container{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    column-gap: 30px;
}
header{
    grid-column: span 3;
    text-align: center;
    border-bottom: 1px solid #bbb;
    font-size: 1.0em;
    text-transform: lowercase;
}
nav{
    padding:30px;
    border-right: 1px solid #ddd;
}
nav li {
    text-decoration: underline;
}
article{
padding: 30px;
color: burlywood;
}
article h2{
    font-size: 3.5em;
    max-width:800px;
}
article img{
    max-width: 100%;
}
article p{
    max-width:100%;
    margin-top: 30px auto;
    line-height: 2em;
    color: #777;
}
aside{
    padding:30px;
    border-left: 1px solid #ddd;
}
footer{
    grid-column: span 3;
    text-align: center;
    border-top: 1px solid #777;
    padding:30px;
}
/* responsive */
@media screen and (max-width: 1200px) {
 nav{
     grid-column: span 3;
     border-right: 0;
     border-bottom: 1px solid #ddd;
 }
 nav li{

    display: inline-blocK;
    margin: 20px;
 }
 article{
    grid-column: span 2;
 }
 article p{
    padding: 20px
 }
 aside{
    padding: 15px;
 }
}

@media screen and (max-width: 950px) {
    nav, article, aside{
        grid-column: span 3;
    }
        
    aside{
        border-left: 0;
        border-top: 1px solid #ddd;
    }
    article h2{
        font-size: 2.5em;
    }
}