@charset "utf-8";

body {
    margin: 20px;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    background: #ffffff;
}
ul,li {
    padding: 0;
    list-style-type: none;
}
h1,h2,h3 {
    color: #505050;
    margin-left: 0px;
}
p {
    color: #505050;
}

header {
    max-width: 1200px;
    margin: 60px;
    border-bottom: 1px solid #bbc7c7;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 20px auto 20px 60px;
    left: auto;
    float: left;
}
article.featured {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    border-bottom: 1px solid #bbc7c7;
    padding-bottom: 40px;
}
article img, article.featured img {
    width: 100%;
    border: 4px solid #bbc7c7;
    border-radius: 8px;
}
article p, article h3 {
    margin: 20px 10px;
}

/* responsive*/
@media screen and (max-width: 980px) {
    article {
        grid-colum: span 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }
}

@media screen and (max-width: 760px) {
    article, article.featured {
        display: block;
        margin: 0 20px;
    }
}