html, 
body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans 3", serif;
    height:100vh;
    min-width:375px;
}

*{
    box-sizing: border-box;
    font-size:11.2px;
}
/* =================
    Flex container
   ================= */
.site-header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:6.6vh;
}

nav ul{
    display:flex;
    gap:1.5em;
}

.page-logo{
    display:flex;
    font-family:  "Roboto", serif;
    font-weight: 600;
    align-items: center;
    gap:0.2em;
}
/* =================
    Navigation
   ================= */

nav li{
    text-transform: uppercase;
    list-style: none;
    font-weight: 600;
    font-size:1rem;
}
/* =================
   Hero
   ================= */
.hero article{
    position:relative;
    margin-bottom:1em;
}
.hero img{
    height: 32.6vh;
    min-height:293px;
    background: #0000004F;
    object-fit: cover;
    object-position: 0% 100%;
    transform: rotateY(180deg);
    position:relative;
}
.overlay-text{
    width:90%;
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color:white;
    height:auto;
    overflow: hidden;
    transition: .5s ease;
    margin:0 auto;
}



/* =================
    Layout
   ================= */

.outer{
    width:90%;
    margin:0 auto;
}

.grid-container{
    display:grid;
    grid-template-columns: 1fr;
    row-gap:1em;
    min-width: 309px;
}

/* =================
   Typography
   ================= */
.page-logo p{
    font-size:1.25rem;
}
a{
    text-decoration: none;
    color:black;
}
a:hover{
    color:orange
}

date{
    text-transform:uppercase;
}
.more-link{
    display:block;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration-line: underline;
    color:black;
    margin-bottom:3em;
}

.hero date{
    font-size:0.75rem;
    font-weight:400;
}

.hero h2{
    font-size:2.86rem; 
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: left;
    margin:0.25em auto 0.25em;
}

.summary{
    font-size: 1.43rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    margin-top:0;
    
}
.section{
    color:black;
    min-width:309px;
}
.section date{
    font-size:0.8875rem;
    font-weight:400;
}
.section h2{
    font-size:2.15rem;
    font-weight: 700;
    margin:0.375em auto;
}
.section p{
    color:#505050;
}
/* =================
   Images
   ================= */
.page-logo img{
    width:2.125em;
    height:2.125em;
}

.feature-image{
    display:block;
    object-fit: cover;
    width:100%;
    /* height:100%; */
    border-radius:3px;
    margin-bottom:0.875em;
}

/* =================
   Footer
   ================= */
footer{
    background-color: #202020;
    text-align: center;
    padding:3.08em 0;
    font-size:1em;   
}

footer p{
    margin:0;
}
.trademark{
    letter-spacing:-0.03em; 
    font-weight:700;
    color:#ECECEC;
}
.copyright{
    font-weight:400;
    color:#D7D7D7;
}

@media(min-width:768px){
    *{
        font-size:16px;
    }
    .page-logo p{
        font-size:1.25rem;
    }
    .grid-container{
        display:grid;
        grid-template-columns: repeat(auto-fit,minmax(309px,1fr));
        gap:2em;
    }
    .hero img{
        height: 80vh;
        object-position: 0% 70%;
        transform: rotateY(180deg);
        max-height:488px;
    }

    .overlay-text{
        width:50%;
        left:3.7em;
        right:23.44em;
        bottom:3.75em;
        margin:0;
        height:0;
    }

    .hero article:hover .overlay-text{
        height:auto;
    }
    .hero article{
        position:relative;
        margin-bottom:2em;
    }

    .site-header{
        height:11.8vh;
    }

    .hero h2{
        font-size:2.5rem; 
    }
    .section h2{
        font-size:1.5rem;
    }

    .summary{
        font-size:1rem;
    }
    footer{
        padding:2.3125em 0; 
    }
    
}