#public{
    width: 70%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-bottom: 2%;
    }#public > a{
        width: min-content;
        height: auto;
        text-decoration: none;
        border: none;
        }.card-pb{
            transition-duration: 0.5s;
            width: fit-content;
            background-color: var(--verde-escuro);
            padding: 1%;
            height: auto;
            border: solid 1px rgb(190, 190, 190);
            border-radius: 0.25rem;
            text-align: center;
            }.card-pb:hover{
                opacity: 80%;
            }.card-info{
                height: 10%;
                padding: 4% 2% 2% 2%;
                background-color: var(--verde-escuro);
                color: var(--branco);
                }.card-info > h1{
                    margin: 0;
                    font-family: var(--fonte-extrabold);
                    font-size: 1.2em;
                }.card-info > p{
                    font-size: 0.8em;
                    margin: 0;
                    padding: 0;
            }.img-card {
                height: 80%;
                width: fit-content;
                display: block;
                }.img-card > img{
                    max-width:100%;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    max-width: 270px;
                }

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

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

    #public{
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); 
        margin-bottom: 10%;
        }.card-pb{
            width: fit-content;
            }.img-card > img{
                max-width: 150px;
                }.card-info > h1{
                    margin: 0;
                    font-family: var(--fonte-extrabold);
                    font-size: 1em;
                }.card-info > p{
                    font-size: 0.6em;
                    margin: 0;
                    padding: 0;
                }
}