.post-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 2px solid $primary-color;
    padding: 1rem;  
    font-weight: 600;
    grid-gap: 1rem;

    @media only screen and (max-device-width: 499px ) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    &__prev {
        display: grid;
        grid-template-columns: 20% 80%;
        grid-template-rows: min-content;
        align-items: center;
        text-align: left;
        
        
        &-fa {
            a {
                color: $font-color; 
                }

        }

        &-text a {
            color: $font-color;    
        }
    }

    &__next {
        
        display: grid;
        grid-template-columns: 80% 20%;
        
        align-items: center;
        text-align: right;

        &-text a {
            color: $font-color; 
            
        }

        &-fa {
            a {
            color: $font-color; 
            }
        }
    }
}

.fa-less-than, .fa-greater-than {
    font-size: 300%;

}