```css
/* =========================================
   SEEK YOUR CREATOR
   MAIN WEBSITE CSS
   ========================================= */


/* =========================================
   BASIC RESET
   ========================================= */

* {
    box-sizing: border-box;
}


/* =========================================
   PAGE
   ========================================= */

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0 20px;

    background: #f4f7f1;
    color: #26312b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.7;
}


/* =========================================
   MAIN SITE CONTAINER
   ========================================= */

.site {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


/* =========================================
   HEADER
   ========================================= */

.site-header {
    padding: 70px 0 55px;

    text-align: center;
}


.site-header h1 {
    margin: 0;

    color: #315c46;

    font-size: 2.5rem;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


.tagline {
    margin: 12px 0 0;

    color: #69736d;

    font-size: 1.05rem;
}


/* =========================================
   SECTION HEADINGS
   ========================================= */

.articles h2,
.contact h2 {
    margin: 0 0 25px;

    color: #315c46;

    font-size: 1.35rem;
    font-weight: 600;

    line-height: 1.3;

    text-align: center;
}


/* =========================================
   ARTICLE LIST
   ========================================= */

.article-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.article-list li {
    margin: 0;
}


/* =========================================
   ARTICLE CARD
   ========================================= */

/*
   Simple rectangular article card.

   The top corners are strongly rounded.

   The bottom corners are only slightly
   rounded.
*/

.article-card {
    display: flex;
    flex-direction: column;

    min-height: 250px;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #d5ded7;

    border-radius:
        80px 80px 10px 10px;

    color: #26312b;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 5px 18px rgba(49, 92, 70, 0.06);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* =========================================
   ARTICLE CARD TITLE
   ========================================= */

.article-card-title {
    margin: 0;

    color: #315c46;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.4;
}


/* =========================================
   ARTICLE CARD DESCRIPTION
   ========================================= */

.article-card-description {
    margin: 12px 0 20px;

    color: #69736d;

    font-size: 0.95rem;

    line-height: 1.6;
}


/* =========================================
   ARTICLE CARD READ LINK
   ========================================= */

.article-card-read {
    margin-top:  8px;

    color: #315c46;

    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================
   ARTICLE CARD HOVER
   ========================================= */

.article-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 9px 26px rgba(49, 92, 70, 0.11);
}


/* =========================================
   CONTACT
   ========================================= */

.contact {
    margin-top: 75px;

    padding: 35px 20px;

    background: #e5eee7;

    border: 1px solid #d5ded7;

    border-radius: 12px;

    text-align: center;
}


.contact p {
    margin: 0;
}


.contact a {
    color: #315c46;

    font-weight: 600;

    text-decoration: none;
}


.contact a:hover {
    text-decoration: underline;
}


/* =========================================
   GENERAL LINKS
   ========================================= */

a:focus-visible {
    outline: 2px solid #315c46;

    outline-offset: 4px;
}


/* =========================================
   FOOTER
   ========================================= */

footer {
    margin-top: 55px;

    padding: 30px 0 45px;

    border-top: 1px solid #d5ded7;

    color: #69736d;

    text-align: center;

    font-size: 0.9rem;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

    body {
        padding: 0 16px;
    }


    .site-header {
        padding: 50px 0 40px;
    }


    .site-header h1 {
        font-size: 2rem;
    }


    .tagline {
        font-size: 1rem;
    }


    .article-list {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .article-card {
        min-height: 220px;

        padding: 28px 22px;
    }


    .contact {
        margin-top: 60px;
    }

}


/* =========================================
   VERY SMALL PHONES
   ========================================= */

@media (max-width: 380px) {

    body {
        padding: 0 12px;
    }


    .site-header h1 {
        font-size: 1.8rem;
    }


    .article-card {
        padding-left: 18px;
        padding-right: 18px;
    }

}
```css
/* =========================================
   ARTICLE HEADER
   ========================================= */

.article-header {
    padding: 50px 0 35px;

    text-align: center;

    border-bottom: 1px solid #d5ded7;
}


/* =========================================
   ARTICLE SITE NAME
   ========================================= */

.article-site-name {
    color: #315c46;

    font-size: 1.45rem;
    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;
}


.article-site-name:hover {
    text-decoration: underline;
}


/* =========================================
   ARTICLE TAGLINE
   ========================================= */

.article-tagline {
    margin: 7px 0 0;

    color: #69736d;

    font-size: 0.95rem;
}


/* =========================================
   ARTICLE
   ========================================= */

.article {
    max-width: 700px;

    margin: 0 auto;

    padding: 60px 0 70px;
}


/* =========================================
   ARTICLE TITLE
   ========================================= */

/*
   The article itself provides the only H1
   on the page.
*/

.article h1 {
    margin: 0 0 35px;

    color: #315c46;

    font-size: 2.4rem;
    font-weight: 600;

    line-height: 1.25;

    text-align: center;
}


/* =========================================
   ARTICLE HEADINGS
   ========================================= */

.article h2 {
    margin: 45px 0 18px;

    color: #315c46;

    font-size: 1.55rem;
    font-weight: 600;

    line-height: 1.35;
}


.article h3 {
    margin: 35px 0 15px;

    color: #315c46;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.4;
}


/* =========================================
   ARTICLE PARAGRAPHS
   ========================================= */

.article p {
    margin: 0 0 22px;

    color: #26312b;

    font-size: 1.05rem;

    line-height: 1.85;
}


/* =========================================
   ARTICLE LINKS
   ========================================= */

.article a {
    color: #315c46;

    font-weight: 600;

    text-decoration: underline;
}


.article a:hover {
    text-decoration: none;
}


/* =========================================
   ARTICLE LISTS
   ========================================= */

.article ul,
.article ol {
    margin: 0 0 25px;

    padding-left: 25px;
}


.article li {
    margin-bottom: 10px;

    color: #26312b;

    line-height: 1.8;
}


/* =========================================
   ARTICLE BLOCKQUOTES
   ========================================= */

.article blockquote {
    margin: 30px 0;

    padding: 20px 25px;

    background: #e5eee7;

    border-left: 4px solid #315c46;

    color: #3d4b43;
}


/* =========================================
   ARTICLE HORIZONTAL RULE
   ========================================= */

.article hr {
    margin: 45px 0;

    border: 0;

    border-top: 1px solid #d5ded7;
}


/* =========================================
   ARTICLE FOOTER SPACE
   ========================================= */

.article + * {
    margin-top: 0;
}


/* =========================================
   ARTICLE MOBILE
   ========================================= */

@media (max-width: 650px) {

    .article-header {
        padding: 35px 0 25px;
    }


    .article-site-name {
        font-size: 1.3rem;
    }


    .article-tagline {
        font-size: 0.9rem;
    }


    .article {
        padding: 40px 0 55px;
    }


    .article h1 {
        margin-bottom: 30px;

        font-size: 2rem;
    }


    .article h2 {
        margin-top: 38px;

        font-size: 1.4rem;
    }


    .article h3 {
        font-size: 1.2rem;
    }


    .article p {
        font-size: 1rem;

        line-height: 1.8;
    }

}


/* =========================================
   VERY SMALL PHONES
   ========================================= */

@media (max-width: 380px) {

    .article h1 {
        font-size: 1.8rem;
    }


    .article p {
        font-size: 0.98rem;
    }

}
/* =========================================
   ARTICLE CARD DATE
   ========================================= */

.article-card-date {
    margin-top: auto;

    color: #9aa49e;

    font-size: 0.68rem;

    line-height: 1.3;

    letter-spacing: 0.02em;
}


/* =========================================
   ARTICLE PUBLISHED DATE
   ========================================= */

.article p.article-published-date {
    margin: -22px 0 30px;

    color: #a5ada8;

    font-size: 0.73rem;

    line-height: 1.2;

    text-align: left;
}