h1 {
    font-size: 3rem;
    letter-spacing: var(--section-heading-letter-spacing);
}

.blog {
    padding: var(--padding-y) var(--padding-x);
    color: var(--dark-color);
}

.blog a {
    color: var(--dark-color);
    text-decoration: none;
}

.no-content {
    text-align: center;
    height: 20vh;
}

.post {
    padding: var(--padding-y) var(--padding-x);
}

.post h2 {
    font-family: var(--serif-font-family);
    margin-bottom: 1rem;
    letter-spacing: var(--section-heading-letter-spacing);
}

.post .image {
    width: 100%;
}

.body {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.body {
    font-size: var(--section-text-font-size);
    letter-spacing: var(--section-text-letter-spacing);
}

.recent-posts {
    padding: var(--padding-y) var(--padding-x);
}

.recent-posts h2 {
    margin-bottom: 1rem;
    letter-spacing: var(--section-heading-letter-spacing);
}

.recent-posts a {
    font-size: var(--section-text-font-size);
    letter-spacing: var(--section-text-letter-spacing);
    color: var(--golden-color);
}

.recent-posts a:hover {
    color: var(--dark-color);
}

.active > .page-link {
    background-color: var(--golden-color);
    border-color: var(--golden-color);
}

.page-item:first-child .page-link:hover,
.page-item:last-child .page-link:hover,
.page-item .page-link:hover {
    color: var(--golden-color);
}


@media (min-width: 776px) {
    .no-content {
        height: 40vh;
    }
}

@media (min-width: 1400px) {
    .no-content {
        height: 50vh;
    }
}