/***********************************************************************************************************************************

    ██████╗  ██████╗ ███████╗████████╗███████╗    ███╗   ██╗ █████╗ ██╗   ██╗██╗ ██████╗  █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
    ██╔══██╗██╔═══██╗██╔════╝╚══██╔══╝██╔════╝    ████╗  ██║██╔══██╗██║   ██║██║██╔════╝ ██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
    ██████╔╝██║   ██║███████╗   ██║   ███████╗    ██╔██╗ ██║███████║██║   ██║██║██║  ███╗███████║   ██║   ██║██║   ██║██╔██╗ ██║
    ██╔═══╝ ██║   ██║╚════██║   ██║   ╚════██║    ██║╚██╗██║██╔══██║╚██╗ ██╔╝██║██║   ██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
    ██║     ╚██████╔╝███████║   ██║   ███████║    ██║ ╚████║██║  ██║ ╚████╔╝ ██║╚██████╔╝██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
    ╚═╝      ╚═════╝ ╚══════╝   ╚═╝   ╚══════╝    ╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝

 **********************************************************************************************************************************/




.posts-navigation {
}

    .posts-navigation > .panel > .row {
        background: var(--nvm-color-gray-1);
        padding: 1em;
        margin-inline: var(--nvm-grid-rhythm);
    }

        .laptop .posts-navigation > .panel > .row {
            padding: 4em 2em;
        }

        .posts-navigation .navigation-box {
        }

            .posts-navigation .navigation-box a.post-navigation-button {
                position: relative;
                display: flex;
                font-size: 16px;
                color: var(--nvm-color-text);
                background: transparent;
                border: 0;
                box-shadow: none;
                padding: 1em 1.825em;
                transition: all .25s ease-in-out;
            }

                .posts-navigation .navigation-box a.post-navigation-button:is( :hover, :focus, :active ) {
                    color: var(--nvm-color-text);
                    opacity: 0.7;
                    box-shadow: none;
                }

                .posts-navigation .navigation-box a.post-navigation-button::after {
                    position: absolute;
                    line-height: 1em;
                    transition: all .2s linear;
                }

                .posts-navigation .navigation-box a.post-navigation-button .image-box {
                    width: 120px;
                    border-radius: 50%;
                }

                    html:not( .laptop ) .posts-navigation .navigation-box a.post-navigation-button .image-box {
                        display: none;
                    }
                
                    .posts-navigation .navigation-box a.post-navigation-button .image-box img {
                        transition: all .2s linear; 
                    }

                        .posts-navigation .navigation-box a.post-navigation-button:is( :hover, :focus, :active ) .image-box img {
                            transform: scale(1.1);
                        }

            .posts-navigation .navigation-box a.post-navigation-button.previous {
                align-items: center;
                justify-content: flex-start;
                text-align: left;
            }

                html:not( .tablet ) .posts-navigation .navigation-box a.post-navigation-button.previous {
                    justify-content: center;
                    margin-bottom: 1em;
                }

                .posts-navigation .navigation-box a.post-navigation-button.previous::after {
                    left: .4em;
                    content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32"><path fill="rgb(31,31,31)" d="M19.040 14.272q0.672 0 1.152 0.512t0.48 1.184-0.48 1.184-1.152 0.48h-12.64l3.808 3.808q0.48 0.48 0.48 1.184t-0.48 1.184-1.152 0.48q-0.736 0-1.216-0.48l-7.84-7.84 7.84-7.84q0.48-0.48 1.184-0.48t1.184 0.48 0.48 1.184-0.48 1.184l-3.808 3.776h12.64z"></path></svg>' );
                }

                    .posts-navigation .navigation-box a.post-navigation-button.previous:is( :hover, :focus, :active )::after {
                        transform: scale(1.4);     
                    }

            .posts-navigation .navigation-box a.post-navigation-button.next {
                align-items: center;
                justify-content: flex-end;
                text-align: right;
            }

                html:not( .tablet ) .posts-navigation .navigation-box a.post-navigation-button.next {
                    justify-content: center;
                    margin-top: 1em;
                }

                .posts-navigation .navigation-box a.post-navigation-button.next::after {
                    right: .4em;
                    content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32"><path fill="rgb(31,31,31)" d="M10.496 8.128q0.48-0.48 1.152-0.48t1.184 0.48l7.84 7.84-7.84 7.84q-0.48 0.48-1.152 0.48-0.704 0-1.184-0.48t-0.48-1.184 0.48-1.184l3.84-3.808h-12.64q-0.704 0-1.184-0.48t-0.512-1.184 0.512-1.184 1.184-0.512h12.64l-3.84-3.776q-0.48-0.48-0.48-1.184t0.48-1.184z"></path></svg>' );
                }

                    .posts-navigation .navigation-box a.post-navigation-button.next:is( :hover, :focus, :active )::after {
                        transform: scale(1.4);
                    }

                .posts-navigation .navigation-box a.post-navigation-button .label {
                    font-size: 18px;
                    text-transform: lowercase;
                    font-weight: bold;
                    line-height: 1.3em;
                    margin-inline: 1em;
                }

            .posts-navigation .navigation-box a.post-navigation-button.all-posts {
                align-items: center;
                text-align: center;
            }

                .posts-navigation .navigation-box a.post-navigation-button.all-posts:is( :hover, :focus, :active ) {
                    background: transparent;
                }

                .posts-navigation .navigation-box a.post-navigation-button.all-posts::after {
                    left: 50%;
                    transform: translateX(-50%);
                    content: url( 'data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32"><path fill="rgb(31,31,31)" d="M0 29.28v-9.152q0-0.704 0.48-1.184t1.184-0.512h9.12q0.704 0 1.184 0.512t0.48 1.184v9.152q0 0.672-0.48 1.152t-1.184 0.48h-9.12q-0.704 0-1.184-0.48t-0.48-1.152zM0 11.808v-9.152q0-0.672 0.48-1.152t1.184-0.48h9.12q0.704 0 1.184 0.48t0.48 1.152v9.152q0 0.704-0.48 1.184t-1.184 0.512h-9.12q-0.704 0-1.184-0.512t-0.48-1.184zM17.504 29.28v-9.152q0-0.704 0.48-1.184t1.184-0.512h9.152q0.672 0 1.184 0.512t0.48 1.184v9.152q0 0.672-0.48 1.152t-1.184 0.48h-9.152q-0.672 0-1.184-0.48t-0.48-1.152zM17.504 11.808v-9.152q0-0.672 0.48-1.152t1.184-0.48h9.152q0.704 0 1.184 0.48t0.48 1.152v9.152q0 0.704-0.48 1.184t-1.184 0.512h-9.152q-0.672 0-1.184-0.512t-0.48-1.184z"></path></svg>' );
                }

                    .posts-navigation .navigation-box a.post-navigation-button.all-posts:is( :hover, :focus, :active )::after {
                        transform: translateX(-50%) scale(1.2);
                    }

                .posts-navigation .navigation-box a.post-navigation-button.all-posts .label {
                    display: none;
                }