#navpm{

    div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    div:nth-child(2) {
        margin-inline: auto;
       
       
    }

    div:nth-child(3){
        justify-self:end;
    }    
    
}

#navpm div {
    font: var(--h2);
    color: var(--text-color-pm);
}

#navsec{

    a {
        color: var(--text-color-sec);
        text-decoration:none;
        font: var(--span);

        &:hover {
            color: var(--brand-color-light);
        }

        

    }
    padding-block: 14px;
    border: 1px solid var(--stroke-color);
    border-inline: none;
    margin-top: 20px;
    justify-content: space-between;

    
    
   
}




#moreread header {
    border: 1px solid var(--stroke-color);
    padding-top: 12px;
    padding-bottom: 24px;
    border-inline: none;
    border-block-end: none;
}    

#moreread {

    header a {

        justify-self: end;
        font: var(--span);
        text-decoration: none;
        color: var(--text-color-sec);
        align-items: center;
        gap: 4px;

        &:hover {
            color: var(--brand-color-light);
        }
        
        span {
            background-image: url(assets/ArrowRight.svg);
            width: 16px;
            height: 16px;
        }

        &:hover span {
            background-image: url(assets/arrow-white-hover.svg);
        }
        
        


    }
}

.board-1 header {
    

        border: 1px solid var(--stroke-color);
        border-inline: none;
        border-block-end: none;
        padding-top: 12px;
        padding-bottom: 24px;
}

.board-1 {

   a {
        
        justify-self: end;
        text-decoration: none;
        font: var(--span);
        color: var(--text-color-sec);
        align-items: center;
        gap: 4px;

        &:hover {
            color: var(--brand-color-light);
        }

        span {
            background-image: url(assets/arrowRight.svg);
            width: 16px;
            height: 16px;
            
            
        }

        &:hover span {
            background-image: url(assets/arrow-white-hover.svg)
        }

       

    }
}

.board-2 {

    header {

        border: 1px solid var(--stroke-color);
        padding-top: 12px;
        padding-bottom: 24px;
        border-inline: none;
        border-block-end: none;

    }

    a {
        justify-self: end;
        text-decoration: none;
        font: var(--span);
        color: var(--text-color-sec);
        align-items: center;
        gap: 4px;

        &:hover {
            color: var(--brand-color-light);

        }

        span {
            background-image: url(assets/ArrowRight.svg);
            width: 16px;
            height: 16px;
        }

        &:hover span {
            background-image: url(assets/arrow-white-hover.svg)

        }


    }

   
}