.page-navigation{
    margin: var(--block-margin) auto;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}

.page-navigation-side{
    position: sticky;
    top: calc(var(--admin-bar-height) + var(--fixed-header-height) + var(--row-gap));
    align-self: start;
    max-width: calc(100vh - var(--admin-bar-height) - var(--fixed-header-height));
    overflow: auto;
}

.page-navigation-side.animate__animated{
    animation-name: fadeInLeft;
}

.page-navigation-side nav:not(:first-child){
    margin-top: var(--row-gap);
}

.page-navigation-side nav ul{
    margin: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    row-gap: 2.4rem;
    max-height: calc(100vh - var(--admin-bar-height) - var(--fixed-header-height) - (2 * var(--row-gap)));
    overflow: auto;
}

.page-navigation-side nav ul li{
    display: flex;
    list-style: none;
}

.page-navigation-side nav ul li a{
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: var(--text-color);
    opacity: 0.6;
    padding: 0.4rem 0;
    transition: all 0.3s linear;
}

.page-navigation-side nav ul li a:is(:hover, :focus, :active, .active){
    opacity: 1;
    color: var(--accent-color);
}

.page-navigation-side nav ul li a.active{
    color: var(--accent-color);
    font-size: 2.4rem;
    padding: 0;

}

.page-navigation .blocks-container{
    --default-block-width: 100%;
    --full-width: 100%;
    --wide-width: 100%;
    grid-column: 2;
}

.page-navigation .blocks-container > p{
    margin-bottom: 1.6rem;
}

.page-navigation .blocks-container > *:not(p + p, :first-child){
    margin-top: 3.2rem;
}

@media (min-width: 768px){
    .page-navigation{
        grid-template-columns: 10rem minmax(0, 1fr);
    }
}

@media (min-width: 1200px){
    .page-navigation{
        grid-template-columns: 15rem minmax(0, 1fr) 10rem;
    }
}