/* Basic sections */

section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    max-width: 1280px;
}


/* Special Sections */

.hero {

    align-items: stretch;

    p {
        font-size: 2rem;
        line-height: 1.2;
    
        /* no hyphens */
        -moz-hyphens: none;
        -o-hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));

    gap: var(--gap-xl);

    place-items: stretch;

    max-width: none;

    .card-square {

        background-color: var(--c-highlight);
    }

    .card-wide {
        grid-column: span 2;
    }
}

.article-list {
    flex-flow: column nowrap;
    gap: var(--gap-3xl);
    justify-content: center;
    align-items: center;

    max-width: 100%;
}

.contact {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xl);

    margin-top: var(--gap-3xl);
}

footer {
    margin-top: 30vh;
    max-width: 30em;

    h3 {
        color: var(--c-text);
        opacity: .5;
        font-size: 1.5rem;
    }
    h4 {
        color: var(--c-text);
        opacity: .5;
        font-size: 1rem;
        font-weight: 500;
        margin-top: 1em;
    }
    p, li {
        color: var(--c-text);
        opacity: .5;
        font-size: 1rem;
        font-weight: 200;
        list-style: none;
    }
}