/** NB: mobile first, so layout/color sugar for bigger screens at the bottom **/

/*** header ********************************************/

.splash header h1 {
    font-size: 3rem;
    font-weight: bold;
}

.splash header h1 span {
    background-color: #1f2426;
    color: #ff9900;
    padding: 0.1em 0.3em;
    border-radius: 4px;
}
.splash header p {
    margin: 1em 6px 0 6px;
    background-color: #ffffff22;
    border-radius: 4px;
    line-height: 1.7em;
    padding: 0.5em;
}
.splash header a {
    font-weight: bold;
    box-shadow: none;
}

/*** main ********************************************/

.splash main {
    padding-top: 1em;
}

.splash main > div {
    padding: 0.25em;
    margin-bottom: 1em;
}

.splash main h2 span {
    background-color: #1f2426;
    color: #f2ecde;
    padding: 0.2em 0.25em;
    border-radius: 4px;
    font-weight: bold;
    font-size: 2.5rem;
}

.splash h3, .splash h4, .splash h5 { margin-bottom: 0; }

.splash h5 { margin-top: 1em; }

.splash main blockquote { margin: 0; }
.splash main blockquote p {
    margin: 1em 0 0 0;
    font-style: italic;
}
.splash main blockquote p:before { content: open-quote; }
.splash main blockquote p:after { content: close-quote; }
.splash main .cite { margin-top: 0; }

.splash main .readmore {
    padding: 1em 0;
    font-size: 1.5rem;
    font-weight: bold;
}

/*** response varients ********************************************/

@media (min-width: 768px ) {
    /*** grid on wide ***/
    .splash main {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-column-gap: 2em;
    }

    .splash .readmore {
        grid-row-start: 2;
    }

    /*** bigger splash ***/
    .splash header {
        padding: 100px 0;
    }
    .splash header h1 {
        font-size: 6rem;
    }
    .splash header p {
        font-size: 2rem;
        margin-top: 3em;
    }
}