*, *::before, *::after {
    box-sizing: border-box;
}

html, 
body {
    margin: 0;
    padding: 0;
}

body{
    font-family: "Source Sans 3", sans-serif;
    color: #151515;
    background-color: #fafafa;
    display: grid;
    gap: 0;

}

/* Header-start */
.site-header{
    grid-area: head;


    padding-top: 1.5em;
    padding-bottom: 1.5em;
/*
    font-size: 0.8em;
    */
    font-weight: bold;

    background-color: white;

    display: grid;
    grid-template-columns: 0.5em 1fr 0.5em;
    grid-template-areas: 
    ".... shin ...."
    ;

}

.site-header-inner{
    grid-area: shin;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    display: flex;
    align-items: center;
}

.logo img {
    display: inline-block;
    margin-right: 0.5em;
}

.site-nav ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    justify-content: end;

    padding-left: 0;
}

.site-nav ul li {
    display: inline-block;
    padding: 0 0.5em;
}



.site-nav a, .latest-inner a {
    color: #151515;
    text-decoration: none;
    
}

.site-nav a:focus, .site-nav a:hover, .latest-inner a:focus{
    cursor: pointer;
    color: #575353;
}

article {
    margin-bottom: 1em;
    padding: 0.5em;
}

@media (min-width: 1024px) {
    .site-header{
        grid-template-columns:  repeat(12, 1fr) ;
        grid-template-areas:
        "... shin shin shin shin shin shin shin shin shin shin ..."
    }

    
    .latest-inner{
        max-width: 650px;
    }

    .site-nav ul li {
        padding: 0;
    }

    .site-nav ul li:first-child {
        padding: 0 1em;
    }
}