.blog-post header, .blog header {
    text-align: left;
    margin: 0 auto 24px auto;
}

.blog-post h1, .blog h1 {
    margin: 2em 0 0 0;
    font-size: 1.5rem;
}

.blog-post h2 {
  text-align: left;
  font-size: 1.2rem;
}

.blog-post img {
    width: 100%;
}

.blog-post main, .blog-post header {
  max-width: 32rem;
}

@media (min-width: 768px) {
    .blog-post img {
        width: auto;
        max-width: 150%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.blog h1 {
    font-size: 2rem;
    margin: 2em 0 0.5em 0;
}

.blog .content-list article {
    padding-bottom: 1.5em;
}

.blog .content-list article:first-child {
    padding-top: 2rem;
}

.blog .content-list article h3 {
    font-family: var(--font);
    font-weight: 600;
    font-size: 1.1em;
    margin: 0;
    padding: 0;
    color: var(--title);
}

.blog .content-list article h3 a {
    color: var(--tint);
    text-decoration: none;
}

.blog .content-list article h3 a:hover {
    text-decoration: none;
    background-color: var(--tint);
    color: var(--background);
    border-radius: 0.3em;
    padding: 2px 4px 2px 4px;
    margin: -2px -4px -2px -4px;
}

.blog .content-list article p {
    font-size: 0.95em;
    color: var(--text);
    margin: 0.5em 0 0 0;
    line-height: 1.5;
}