.blog {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;

    & .blog-menu {
        flex: 1 0 320px;
        padding: 0em;
        background-color: color-mix(in srgb, var(--color-fg) 2%, transparent);
        border-inline-start: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);

        & nav {
            margin: 2em 0px;
            padding: 0px;

            & li {
                list-style: none;
                margin: 0em 0em;
                padding: 0.5em 1em;
                border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
                cursor: pointer;
                display: flex;
                flex-direction: row;
                align-items: center;

                & small {
                    display: block;
                    color: color-mix(in srgb, var(--color-fg) 40%, transparent);
                    font-size: 0.8em;
                }

                & a:not(:hover) {
                    color: var(--color-primary);
                    text-decoration: none;
                }

                &::before {
                    content: '›';
                    margin-inline-end: 0.5em;
                    font-size: 2em;
                    color: transparent;
                }

                &.active::before {
                    color: var(--color-primary);            
                }

                &.active, &:hover {
                    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
                    color: var(--color-bg);
                }
            }
        }
    }

    & .blog-content {
        padding: 1em 2em;
        flex: 1 0 480px;
        max-width: 100vw;
    }

}