*{
    margin: 0;
    padding: 0;
}

body{
    background: #e2e2e2;
    padding: 56px 0;
}

.all{
    width: 90%;
    margin: auto;
}
/* Div dos Posts MAIS RELEVANTES e RECENTES */
.recent-posts, .relevant-posts{
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    align-items: start;
}

.relevant-posts{
    overflow: auto;
    flex-wrap: nowrap;

}

/* CSS dos Posts Recentes */
.posts{
    min-width: calc(25% - 10px);
    overflow: hidden;
    cursor: pointer;
    margin: auto;
}

.post-img{
    width: 100%;
    border-radius: 6px;
    transition: .3s linear;
}

.post-content{
    background: #fff;
    margin: 20px;
    padding: 30px;
    border-radius: 6px;
    transform: translateY(-60px);
    transition: .3s linear;
}

.posts:hover .post-img{
    transform: translateY(10px);
}

.posts:hover .post-content{
    transform: translateY(-70px);
}

/* CSS dos posts mais relevantes */

.card{
    margin-top: 20px;
}
/* CSS do Formulário de Contato */
.form{
    width: 100%;
    margin: auto;
}

.form h5{
    margin: 10px 0;
    text-align: center;
}
.form button{
    margin: 10px 0;
}

.form .row label{
    margin-left: 12px;
}

.coment{
    width: 100%;
    margin: auto;
}

.coment .form-floating textarea{
    height: 150px;
}

hr{
    width: 100%;
    margin: 10px auto;
}

.button-coment{
    position: relative;
    width: 100px;
    top: -50px;
    left: calc(100% - 120px);
}
@media screen and (min-width: 500px){
    .posts{
        width: calc(50% - 10px);
    }
}
@media screen and (min-width: 1000px){
    .posts{
        width: calc(25% - 10px);
    }
}