.article-source, .article-styles {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.article-styles img {
    max-width: 50%;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
}

.article-grid + .article-grid {
    margin-top: 1rem;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media only screen and (max-width: 600px) {
    .article-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: span 1;
        margin-bottom: 1rem;
    }
}

blockquote {
    background-color: #F5F5F5;
    border-left: 5px solid #dbdbdb;
    padding: 1.25em 1.5em;
    font-style: italic;
    color: #31363A;
}

blockquote p {
    margin: 0;
}

table {
    font-size: 90%;
}

table th {
    background-color: #E8E8E8;
}

button {
    border-radius: 4px;
    background-color: #1740b4;
    color: #FFF;
    margin: 2rem 0;
}

code, pre code {
    font-size: 90%;
}