#nav-pub{
    border-top: solid 3px var(--amarelo);
    box-shadow: 0px 0px 10px 2px rgb(0, 0, 0, 8%);
    width: 60%;

}#publics{
    width: 70%;
    height: auto;
    }.title-p{
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        text-align: center;
        border-bottom: solid 0.2em var(--verde-escuro);
        }.title-p > h1{
            font-family: var(--fonte-bold);
            color: var(--verde-escuro);
            font-size: 2,5em;
            margin: 0;
        }.title-p > h3{
            font-size: 1.2em;
            color: var(--verde-escuro);
        }#container-posts{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
            height: 800px;
            width: 85%;
            box-shadow: 0px 0px 10px rgb(0, 0, 0, 15%);
            border-radius: 1em;
            overflow-y: scroll;
            margin: 2% 0 2% 0;
            background-color: rgb(0, 0, 0, 4%);
            }.card-post{
                width: fit-content;
                max-width: 250px;
                height: max-content;
            }
                    

/*----------------------------------- Media Query -------------------------------*/

@media (min-width: 0px) and (max-width: 576px) {

    #select-pub{
        display: none;

    }#publics{
        width: 90%;
        margin:  10% auto;
        height: auto;
        }.title-p{
            display: block;
            border-bottom: solid 0.1em var(--verde-escuro);
            margin: 8% 0 5% 0;
            }.title-p > h1{
                font-size: 2em;
                margin: 0;
            }.title-p > h3{
                font-size: 1em;
            }#container-posts{
                display: block;
                height: 800px;
                width: 100%;
                box-shadow: 0px 0px 10px rgb(0, 0, 0, 15%);
                border-radius: 1em;
                margin: auto;
                background-color: rgb(0, 0, 0, 4%);
                overflow-y: scroll;
            }.card-post{
                width: 100%;
                margin: auto;
                max-width: 100%;
            }
                        
                
}@media (min-width: 577px) and (max-width: 768px) {

}