.template-blog-header {
    display: block;
    grid-column: center-start 1 / center-end 6;
    margin: 2rem 0;

    & h1 {
        font-weight: 900;
        font-size: xx-large;
    }
}

.template-blog-content {
    display: block;
    grid-column: center-start 2 / center-end 5;
    margin-bottom: 2rem;
    max-width: 100ch;
    grid-row: 1;

    & > .header {
        margin: 2rem 0;

        & h1 {
            font-weight: 900;
            font-size: xx-large;
        }
    }

    & > .content {
        & h2 {
            --tile-color: magenta;
            &:nth-of-type(6n + 1) {
                --tile-color: var(--p-foreground-green);
            }
            &:nth-of-type(6n + 2) {
                --tile-color: var(--p-foreground-purple);
            }
            &:nth-of-type(6n + 3) {
                --tile-color: var(--p-foreground-red);
            }
            &:nth-of-type(6n + 4) {
                --tile-color: var(--p-foreground-pink);
            }
            &:nth-of-type(6n + 5) {
                --tile-color: var(--p-foreground-blue);
            }
            &:nth-of-type(6n + 6) {
                --tile-color: var(--p-foreground-sea);
            }

            border-bottom: 2px dotted var(--tile-color);

            & > a {
                box-shadow: 0px 4px var(--tile-color);
                padding-bottom: 2px;
                width: fit-content;
            }
        }
    }
}

.blog-tile {
    box-shadow: 0 0 12px var(--shadow-color);
    padding: 2rem;
    border-radius: 0.8rem;
}

.template-blog-navigation {
    display: block;
    grid-column: center-start 6;
    height: 100px;
    margin: 2rem 0 2rem 2rem;
    position: sticky;
}