/* =============================================================================
   Block: Blog Roll
   CUBE CSS: Blog listing page — post list, post card styles.
   ============================================================================= */

body {
    color: var(--color-text-inverse);
}

.navLinks a,
.homeLink a {
    color: var(--color-base);
}

.page-blog h3 {
    text-transform: uppercase;
}

.page-blog .blogRoll {
    max-width: 900px;
    margin: 0 auto;
}

.blogRoll ul {
    padding: unset;
    margin: unset;
}

.blogRoll li.blogPost {
    list-style: none;
    margin: var(--space-l) 0;
    padding: 30px;
    border: 2px dotted;
    border-radius: var(--radius-lg);
}

li.blogPost a {
    color: var(--color-base);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-m);
}

li.blogPost a .left {
    color: var(--color-base);
    display: flex;
}

li.blogPost a .left .copy {
    margin: auto 0;
}

li.blogPost a .right img {
    width: 100%;
    border-radius: var(--radius-lg);
}

li.blogPost time {
    font-family: var(--font-serif);
}

li.blogPost h2 {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    margin: 15px 0;
}

li.blogPost p {
    margin: 0;
    font-size: var(--text-md);
}