@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ======================
        Layout
======================= */
body {
    font-family: 'Source Sans Pro', sans-serif;
    color:whitesmoke;
    background-color: #000;
    display:grid;
    grid-template-columns: 1.5em 1fr 1.5em;

}

/* Header */
header {
    background-color: #171a21;
    display:flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 0px 0px 5px black;;
    padding: 1em 0 1em 1em;
    grid-column: 1 / -1;
    grid-row: 1;
}

nav ul{
    display:flex;
}

li {
    list-style: none;
    margin-right:1em;
}

a {
    text-decoration:none;
    color:#b8b6b4;
}

a:hover {
    color:#8c53ff;
}

/* Hero Post */
.hero-post{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('https://www.publicdomainpictures.net/pictures/30000/nahled/purple-texture-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height:auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: whitesmoke;
    display:flex;
    flex-direction: column;
    justify-content: end;
    align-items:start;
    grid-column: 1 / -1;
    grid-row: 2;
}

.hero-post h3{
    margin-top:10vh;
    margin-left:0.5em;
    font-size:1.5vw;
}

/* Journey Posts */
.journey-post{
    grid-column: 2 / -2;
    grid-row: 3;
}

.purple {
    color:#8c53ff;
    font-weight:bold;
    font-size:20px
}

/* Blog Posts */

.recent-post{
    background-color: #8c53ff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:20px 0;
    grid-column: 1/ -1;
    grid-row:4;
    font-weight: bold;
}

.blog-posts{
    grid-column:2 / -2;
    grid-row:5;
    display:grid;
    grid-template-columns: 1fr;
    width:100%;
    padding:1em;
}

.blog-posts img {
    min-width:17vw;
    min-height: 17vh;
    object-fit:cover;
}

/* Footer */
footer {
    background-color: #171a21;
    height:105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    grid-column:1/ -1;
    grid-row:6;
}

footer p{
    margin:0;
}

/* ======================
        Images
======================= */

.logo {
    width:150px;
}

img {
    width:100%;
    border-radius: 3px;
}

/* ======================
        Typography
======================= */

h3 {
    font-weight:400;
    font-size:14px;
    margin:1em 0;
}

h1 {
    font-size:6vw;
}

p{
    margin: 1em 0;
}

@media (min-width:480px){
    header{
        padding-left:2em;
    }

    .hero-post {
        padding:0 2.5em 2.5em 2.5em;
    }  

    .journey-post{
        padding:0 2em;
    }

    .hero-post p{
        font-size:18px;
    }

    .blog-posts{
        grid-template-columns: repeat(3, 1fr);
        grid-gap:1em;
    }

    li {
        margin-right:2em;
    }
}